css学习之伪类与伪元素选择器

我爱海鲸 2023-10-29 01:45:43 前端

简介伪类与伪元素选择器

一、链接伪类

1、锚点伪类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--:link：表示作为超链接，并指向一个未访问的地址的所有锚-->
		<style type="text/css">
			a{
				text-decoration: none;
			}
			a:link{
				color: deeppink;
			}
			#test:link{
				background: pink;
			}
		</style>
	</head>
	<body>
		<a href="#">点我点我点我</a>
		<div id="test">我是div啦</div>
	</body>
</html>

2、锚点伪类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--:visited：表示作为超链接，并指向一个已访问的地址的所有锚-->
		<style type="text/css">
			a{
				text-decoration: none;
			}
			a:link{
				color: black;
			}
			a:visited{
				color: pink;
			}
		</style>
	</head>
	<body>
		<a href="#">点我点我点我</a>
	</body>
</html>

3、target

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--:target 代表一个特殊的元素，这个元素的id是URI的片段标识符。--> 
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				height: 200px;
				line-height: 200px;
				background: black;
				color: pink;
				text-align: center;
				display: none;
			}
			:target{
				display: block;
			}
		</style>
	</head>
	<body>
		<a href="#div1">div1</a>
		<a href="#div2">div2</a>
		<a href="#div3">div3</a>
		<div id="div1">
			div1
		</div>
		<div id="div2">
			div2
		</div>
		<div id="div3">
			div3
		</div>
	</body>
</html>

二、动态伪类

1、动态伪类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#test:hover{
				color: pink;
			}
			#test:active{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="test">
			我是test
		</div>
	</body>
</html>

2、实际应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color: black;
				display: block;
			}
			a:hover{
				font-size:24px;
				/*color: red;*/
			}
			
			a:link{
				font-size:48px;
				/*color: pink;*/
			}
			a:visited{
				/*font-size:96px;*/
				/*color: deeppink;*/	
			}
		</style>
	</head>
	<body>
		<a href="#1">我是第一个a标签</a>
		<a href="#2">我是第二个a标签</a>
		<a href="#3">我是第三个a标签</a>
		<a href="#4">我是第四个a标签</a>
		<a href="#5">我是第五个a标签</a>
		<a href="#6">我是第六个a标签</a>
	</body>
</html>

三、表单相关伪类

1、表单状态

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
input{width:100px;height:30px; color:#000;}
input:enabled{ color:red;} 
input:disabled{ color:blue;}
</style>
</head>
<body>
<input type="text" value="1"/>
<input type="text" value="1" disabled="disabled"/>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
input:checked{ width:100px;height:100px;}
</style>
</head>
<body>
<input type="checkbox" />
</body>
</html>

2、获取焦点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input:focus{
				background: pink;
			}
			div:focus{
				background: pink;
			}
			
		</style>
	</head>
	<body>
		<input type="text"  value="" />
		<div style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></div>
	</body>
</html>

3、模拟单选框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
	label{ float:left;margin:0 5px; overflow:hidden; position:relative;}
	label input{ position:absolute;left:-50px;top:-50px;}
	span{float:left;width:50px;height:50px;border:3px solid #000;}
	input:checked~span {background:red;}
</style>
</head>
<body>
	<label>
		<input type="radio" name="tab" />
	    <span></span>
	</label>
	<label>
		<input type="radio" name="tab" />
	    <span></span>
	</label>
	<label>
		<input type="radio" name="tab" />
	    <span></span>
	</label>
</body>
</html>

四、伪元素选择器

1、after

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after</title>
<style type="text/css">
div {
	width: 300px;
	height: 100px;
	border: 1px solid #000;
}
div::after {
	content: "我在内容的后面";
}
</style>
</head>
<body>
<div>伪元素</div>
</body>
</html>

2、before

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>
<style type="text/css">
div {
	width: 300px;
	height: 100px;
	border: 1px solid #000;
}
div::before {
	content: "我在内容的前面";
}
</style>
</head>
<body>
<div>伪元素</div>
</body>
</html>

3、firstLetter

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Letter</title>
<style type="text/css">
div {
	width: 500px;
	margin: 0 auto;
	font-size: 12px;
}
div::first-letter {
	color: #f00;
	font-size: 24px;
	font-weight: bold;
}
</style>
</head>
<body>
	<div>sssss</div>
</body>
</html>

4、firstLine

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Line</title>
<style type="text/css">
div {
	width: 500px;
	margin: 0 auto;
}
div::first-line {
	color: #f00;
	font-weight: bold;
}
</style>
</head>
<body>
<div>
	sssss<br>
	sssss<br>
	sssss<br>
</div>
</body>
</html>

5、selection

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selection</title>
<style type="text/css">
div::selection {
	background: red;
	color: pink;
}
</style>
</head>
<body>
<div>SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection</div>
</body>
</html>

二、css声明的优先级问题

1、选择器的特殊性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
			}
			
			#test.test{
				background: pink;
			}
			#test{
				background: deeppink;
			}
			
		</style>
	</head>
	<body>
		<div id="test" class="test">
			
		</div>
	</body>
</html>

2、重要声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
			}
			
			
			div.test{
					background: red!important;
			}
			div{
				background: yellow!important;
			}
			
			#test.test{
				background: pink;
			}
			#test{
				background: deeppink;
			}
			
		</style>
	</head>
	<body>
		<div id="test" class="test">
			
		</div>
	</body>
</html>

3、继承

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				color: #000000;
			}
			
			
			#test{
				width: 200px;
				height: 200px;
				color: deeppink;
			}
			#inner{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="test" class="test">
				test
				<div id="inner">
					inner
				</div>
		</div>
	</body>
</html>

4、来源

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				color: #000000;
			}
			
			
			#test{
				width: 200px;
				height: 200px;
				color: deeppink;
			}
			#inner{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="test" class="test">
				test
				<div id="inner">
					inner
				</div>
		</div>
	</body>
</html>

你好：我的2025

上一篇：css学习之选择器

下一篇：uniapp之相关的弹框组件

前端

前端

前端

最近更新

最近更新

最近更新

Copyright 2025 Inc. AllRights Reserved. Design by 我爱海鲸 湘ICP备19022671号-1