CSS3 选择器的用法总结

╰+攻爆jí腚メ 2021-09-14 09:10 312阅读 0赞

本篇博客主要针对CSS3一个很常用的知识点进行归纳总结，那就是选择器。目的：通过选择器的使用，开发者可以快速地选取到目标元素。本篇通过以下几方面介绍选择器：

*  通配符
 *  直接子节点
 *  常用伪类选择
 *  位置选择
 *  属性选择
 *  状态选择
 *  过滤选择

# 通配符 #

通配符包括三种：

（1）通配符^，表示开头匹配。

（2）通配符$，表示结尾匹配。

（3）通配符\*，表示包含匹配。

它的用法如下：

# 父结构直接子节点的选择 #

父结构的直接子节点的选择，需要通过大于号>来表示，它的用法如下：

# 伪类选择:after、:before、:first-letter、:first-line #

:after，表示在元素后插入内容。

:before，表示在元素前插入内容。

:first-letter，表示文本首字母。

:first-line，表示文本首行。

它们的用法如下：

效果图：

![Center][]

通过jquery实现上述效果，可以是：

使用before和after实现的嵌套效果，如

效果图：

![Center 1][]

# 位置选择 #

位置选择器包括以下几种：

:first-child，选择第一个元素

:last-child，选择最后一个元素

:nth-child(3)，选择第三个元素

:nth-last-child(3)，选择倒数第三个元素

:nth-child(even)，选择第偶数个元素

:nth-last-child(even)，选择第倒数偶数个元素

:nth-child(odd)，选择奇数个元素

:nth-last-child(odd)，选择倒数奇数个函数

它们用法如下：

其中，使用jquery的话，还有如下几种类型的位置选择器：

:first，选择某元素集合的第一个

:eq(2)，选择某元素集合的第三个，其索引值从0开始，注意与:nth-child(3)的区分

:lt(2)，选择某元素集合的第三个之前的（不包括自身）所有该类元素

:gt(2)，选择某元素集合的第三个之后的（不包括自身）所有该类元素

:last，选择某元素集合的最后一个

它们的用法如下：

$("ul li:first-child").addClass("yellow"); //选中每个ul下的第一个li
    $("ul li:last-child").addClass("yellow"); //选中每个ul的最后一个li
    $("ul li:nth-child(3)").addClass("yellow"); //选中每个ul的第三个li
    $("ul li:nth-last-child(3)").addClass("yellow"); //选中每个ul的倒数第三个li
    $("ul li:nth-child(even)").addClass("yellow"); //选中每个ul的偶数li
    $("ul li:nth-child(odd)").addClass("yellow"); //选中每个ul的奇数li
    $("ul li:first").addClass("yellow"); //把ul下所有li合并作为集合，集合中的第一个li
    $("ul li:eq(2)").addClass("yellow"); //把ul下所有li合并作为集合，集合中的第三个li
    $("ul li:lt(2)").addClass("yellow"); //把ul下所有li合并作为集合，集合中的第三个li(不包括自身)之前的所有li
    $("ul li:gt(2)").addClass("yellow"); //把ul下所有li合并作为集合，集合中的第三个li(不包括自身)之后的所有li
    $("ul li:last").addClass("yellow"); //把ul下所有li合并作为集合，集合中的第最后一个li

关于位置选择器，还有一些值得注意的地方，如:nth-child和:nth-of-type的区别：

h2:nth-child(even)，是指父级结构内，第偶数元素是h2时，这意味着第偶个元素不一定是h2，添加样式。

h2:nth-of-type(even)，是指父级结构内，第偶数h2元素，添加样式。

如何循环样式：

li:nth-child(3n+1),是指每3个选项开始循环样式,+1表示每个循环的第1个选项

只有一个元素时的样式：

li:only-child,是指只有一个选项时使用该样式。

测试代码：

效果图：  
![Center 2][]

# 属性选择 #

用法：$('元素\[属性\]')即可、测试代码如下：

# 状态选择 #

可供选择的状态类别如下：

E:hover，鼠标经过

E:focus，获取焦点

E:active，按下鼠标还没松开

E:enabled，可用状态

E:disabled，不可用状态

E:default，单选框或复选框默认状态

E:checked，单选框或复选框选中状态

E:indeterminate，单选框还没开始选择

E::selection，文本被选中时样式

E\[id="e1"\]~E，id为e1的E元素的兄弟元素

E:read-only、E:read-write 指只读、读写

E:invalid 指文本不能通过如元素required、pattern验证时的样式

E:valid 指文本通过如元素required、pattern验证时的样式

E:in-range、E:out-range 需设置min和max属性，指当在三属性内或超出属性时的样式

测试代码如下：

<!DOCTYPE html>
    <meta charset="utf-8" />
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript" src="../../js/jquery/jquery-1.8.0.js"></script>
    		<style>
    			form input[type="text"]:hover {
    				background-color: greenyellow;
    			}
    			/*鼠标经过*/
    			
    			form input[type="text"]:focus {
    				background-color: skyblue;
    			}
    			/*获取焦点*/
    			
    			form input[type="text"]:active {
    				background-color: yellow;
    			}
    			/*按下鼠标还没松开*/
    			
    			div[id="d1"] input:enabled {
    				background-color: #F0F8FF;
    			}
    			/*可用状态*/
    			
    			div[id="d1"] input:disabled {
    				background-color: red;
    			}
    			/*不可用状态*/
    			
    			div[id="d2"] input[type="checkbox"]:default {
    				outline: 2px solid blue;
    			}
    			/*单选框或复选框默认状态*/
    			
    			div[id="d2"] input[type="checkbox"]:checked {
    				outline: 2px solid red;
    			}
    			/*单选框或复选框选中状态*/
    			
    			div[id="d2"] input:indeterminate {
    				outline: 2px solid black;
    			}
    			/*单选框还没开始选择*/
    			
    			div[id="d3"] p::selection {
    				background-color: red;
    			}
    			/*文本被选中时样式*/
    			/*div[id="d4"] p[id="p1"]~p {
    				background-color: azure;
    			}*/
    			/*选中id为p1的兄弟元素*/
    			
    			.yellow {
    				background-color: yellow;
    			}
    			/*jquery添加样式效果*/
    		</style>
    	</head>
    
    	<body>
    		
    		<form>
    			<p>姓名：<input type="text" name="name" /> </p>
    			<p>地址：<input type="text" name="address" /> </p>
    		</form>
    
    		
    		<div id="d1">
    			<input type="text" value="可用" />
    			<input type="text" disabled="disabled" value="不可用" />
    		</div>
    
    		
    		<div id="d2">
    			<input type="checkbox" checked="checked" />
    			<input type="checkbox" />
    			<input type="radio" name="radio" />
    			<input type="radio" name="radio" />
    		</div>
    
    		
    		<div id="d3">
    			<p>我是文本</p>
    		</div>
    
    		
    		<div id="d4">
    			<p id="p1">自己</p>
    			<p>兄弟1</p>
    			<p>兄弟2</p>
    		</div>
    	</body>
    
    	<script>
    		$(document).ready(function() {
    			$("#d4 p[id='p1']~p").addClass("yellow");
    		});
    	</script>
    
    </html>

效果图：  
![Center 3][]

# 过滤选择 #

过滤选择器包括：

:not，排除

:filter，过滤

:empty， 表格项为空时的样式设置，长用于表格内标签样式

:target，target元素的id被当页面中的超链接使用

测试代码：

<!DOCTYPE html>
    <meta charset="utf-8" />
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title>伪类选择器</title>
    		<script src="../../js/jquery/jquery-1.8.0.js"></script>
    		<style>
    			/*div:not([id="d1"]) {
    				background-color: aliceblue;
    			}*/
    			/*排除，该样式排除了id为d1的div*/
    			
    			td:empty {
    				background-color: #0000FF;
    			}
    			/*表格项为空时的样式设置，长用于表格内标签样式*/
    			
    			:target {
    				background-color: red;
    			}
    			/*target元素的id被当页面中的超链接使用*/
    		</style>
    	</head>
    
    	<body>
    		<div id="d1">d1</div>
    		<div id="d2">d2</div>
    		<table border="1">
    			<tr>
    				<td>a</td>
    				<td>b</td>
    				<td>c</td>
    			</tr>
    			<tr>
    				<td>a</td>
    				<td></td>
    				<td>c</td>
    			</tr>
    		</table>
    		<p id="menu">
    			<a href="#t1">t1-示例文字</a>
    			<a href="#t2">t2-示例文字</a>
    			<a href="#t3">t3-示例文字</a>
    		</p>
    
    		<label id="t1">
    			示例文字1
    		</label>
    		<label id="t2">
    			示例文字2
    		</label>
    		<label id="t3">
    			示例文字3
    		</label>
    	</body>
    	<script>
    		$(document).ready(function() {
    			//$("div").not("div[id=d1]").css("background-color", "aliceblue"); 	
    			$("div").css("background-color", "orange").filter("div[id=d1]").css("background-color", "aliceblue");	
    			//console.log($("p").find("a")); //jquery中filter的用法,查找后代
    		});
    	</script>
    
    </html>

效果图：

![Center 4][]

[Center]: /images/20210813/8986497f59a042d9b71a78b56b538462.png
[Center 1]: /images/20210813/2dec315b09a14223a812c593058c9b05.png
[Center 2]: /images/20210813/ef1fb9aa2e384518bb53750f8191f394.png
[Center 3]: /images/20210813/a542c48eb9cc4dadb2fddbe9c3b26205.png
[Center 4]: /images/20210813/093b340604a347029599a3dc81086cd9.png