CSS3 选择器的用法总结

最新推荐文章于 2024-05-08 12:25:39 发布

黄泽平

最新推荐文章于 2024-05-08 12:25:39 发布

阅读量1.6k

点赞数 3

分类专栏：前端集合样式文章标签： css3 选择器

本文链接：https://blog.csdn.net/zeping891103/article/details/78486532

版权

前端集合同时被 2 个专栏收录

153 篇文章 10 订阅

订阅专栏

样式

4 篇文章 0 订阅

订阅专栏

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

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

通配符

通配符包括三种：

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

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

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

它的用法如下：

<style>
	div[id^="d"] {
		background-color: red;
	}
	/*--选择div元素中id开头为d字母的元素--*/
	
	div[id$="1"] {
		background-color: red;
	}
	/*--选择div元素中id结尾为1的元素--*/
	
	div[id*="d"] {
		background-color: red;
	}
	/*--选择div元素中id包含字母d的元素--*/
</style>
<script>
	//jquery写法
	$(document).ready(function() {
		$("div[id^='d']").css("background-color", "red");
		$("div[id$='1']").css("background-color", "red");
		$("div[id*='d']").css("background-color", "red");
	});
</script>

父结构直接子节点的选择

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

<style>
	.red {
		background-color: red;
	}
</style>
<body>
	<ul class="myList">
		<li>
			<a href="http://www.baidu.com">BaiDu</a>
			<ul>
				<li>
					<a href="css1-pdf">css1</a>
				</li>
			</ul>
		</li>
	</ul>
</body>
<script>
	//选中所有包含样式myList的ul标签下的<li>标签的连接<a>
	//运行结果：文本Baidu、css1背景色变红
	$("ul.myList li a").addClass("red"); 
	
	//选中所有包含样式myList的ul标签下的直接子节点<li>标签的连接<a>
	//运行结果：仅文本Baidu背景色变红
	$("ul.myList>li>a").addClass("red"); 
</script>

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

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

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

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

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

它们的用法如下：

<style>
	#e1:after {
		content: "after（网址）";
		color: blue;
	}
	/*--在元素后插入内容--*/
	#e2:before {
		content: "before（图片）";
		color: blue;
	}
	/*--在元素前插入内容--*/
	#e3:first-letter {
		color: blue;
	}
	/*--文本首字母改变样式--*/
	#e4:first-line {
		color: blue;
	}
	/*--文本首行改变样式--*/
</style>
<body>
	<ul>
		<li>
			<a id="e1" href="http://www.baidu.com" target="_blank">百度</a>
		</li>
		<li>
			<a id="e2" href="http://www.baidu.com/img/bd_logo1.png" target="_blank">百度</a>
		</li>
		<li>
			<div id="e3" id="p1">百度</div>
		</li>
		<li>
			<div id="e4" id="p2">百度</div>
		</li>
	</ul>
</body>

效果图：

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

<style>
	.after_add:after {
		content: "after（网址）";
		color: blue;
	}
</style>

//效果相同，添加的内容包含在a标签内
$("#e1").removeClass().addClass("after_add");
//效果不同，添加的内容不包含在a标签
$("#e1").before("<span style='color: blue;'>after（网址）</span>");

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

<style>
	#d1 h2.hot:after {
		content: url(../../img/new.gif);
	}
	/*加热点标签*/
	
	#d1 h2:before {
		content: '第'counter(mc)'章 ';
		color: #FAEBD7;
	}
	
	#d1 h2 {
		counter-increment: mc;
	}
	/*连续编号*/
	
	#d2 h2:before {
		content: '第'counter(mc, upper-roman)'章 ';
		color: #FAEBD7;
	}
	
	#d2 h2 {
		counter-increment: mc;
	}
	/*指定编号：upper-alpha大写英文字母，upper-roman大写罗马字母*/
	
	#d3 h1:before {
		content: counter(mc_max);
	}
	
	#d3 h1 {
		counter-increment: mc_max;
		counter-reset: mc_mid;
	}
	
	#d3 h2:before {
		content: counter(mc_max)'.'counter(mc_mid);
		margin-left: 40px;
	}
	
	#d3 h2 {
		counter-increment: mc_mid;
		counter-reset: mc_small;
	}
	
	#d3 h3:before {
		content: counter(mc_max)'.'counter(mc_mid)'.'counter(mc_small);
		margin-left: 80px;
	}
	
	#d3 h3 {
		counter-increment: mc_small;
	}
	/*编号嵌套*/
	
	#d4 h2:before {
		content: open-quote;
	}
	
	#d4 h2:after {
		content: close-quote;
	}
	
	#d4 h2 {
		quotes: "("")";
	}
	/*左右两边添加符号*/
</style>

<body>
	<div id="d1">
		<h2 class="hot">鹿鼎记</h2>
	</div>

	<div id="d2">
		<h2 class="hot">鹿鼎记</h2>
	</div>
	
	<div id="d4">
		<h2>鹿鼎记</h2>
	</div>

	<div id="d3">
		<h1>大标题</h1>
		<h2>中标题</h2>
		<h3>小标题</h3>
	</div>
</body>

效果图：

位置选择

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

: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)，选择倒数奇数个函数

它们用法如下：

<style>
	li:first-child {
		background-color: yellow;
	}
	/*第一个*/
	li:last-child {
		background-color: yellow;
	}
	/*最后一个*/
	li:nth-child(3) {
		background-color: yellow;
	}
	/*第三个，索引从1开始*/
	li:nth-last-child(3) {
		background-color: yellow;
	}
	/*倒数第三个*/
	li:nth-child(even) {
		background-color: yellow;
	}
	/*偶数2、4、6*/
	li:nth-last-child(even) {
		background-color: yellow;
	}
	/*倒数偶数1、3、5，即奇数*/
</style>

<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
</body>

其中，使用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,是指只有一个选项时使用该样式。

测试代码：

<style>
	#d1 p:nth-of-type(even) {
		background-color: yellow;
	}
	/*--奇数--*/
	
	#d1 p:nth-of-type(odd) {
		background-color: aliceblue;
	}
	/*--偶数--*/
	
	#d2 li:nth-child(3n+1) {
		background-color: yellow;
	}
	
	#d2 li:nth-child(3n+2) {
		background-color: antiquewhite;
	}
	
	#d2 li:nth-child(3n+3) {
		background-color: aqua;
	}
	/*循环*/
	
	#d3 li:only-child {
		background-color: red;
	}
	/*仅有一个*/
</style>
<body>
	<div id="d1">
		<p>奇数</p>
		<p>偶数</p>
		<p>奇数</p>
		<p>偶数</p>
		<p>奇数</p>
	</div>
	
	<div id="d2">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</div>
	<div id="d3">
		<ul>
			<li>only one</li>
		</ul>
	</div>
</body>

效果图：

属性选择

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

<style>
	.red {
		background-color: red;
	}
</style>

<body>
	<table id="languages">
		<thead>
			<tr>
				<th>Language</th>
				<th>Type</th>
				<th>Invented</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Java</td>
				<td>Static</td>
				<td>1995</td>
			</tr>
			<tr>
				<td>Ruby</td>
				<td>Dynamic</td>
				<td>1993</td>
			</tr>
			<tr id="Smalltalk" title="Smalltalk">
				<td>Smalltalk</td>
				<td>Dynamic</td>
				<td>1972</td>
			</tr>
			<tr id="c++" title="c++">
				<td>C++</td>
				<td>Static</td>
				<td>1983</td>
			</tr>
		</tbody>
	</table>
</body>

<script>
	var tr = "";
	tr = $("tr").get(); //获取所有<tr>标签元素包装集
	tr = $("tr").get(1); //获取所有<tr>标签元素包装集的第二个元素
	tr = $("tr").slice(0, 2); //获取所有<tr>标签元素包装集从0位置开始连续2个元素组成的包装集
	var index = $("tr").index($("tr#Smalltalk")); //获取<tr>标签元素包装集中id为Smalltalk的下标
	
	$('tr[id]').addClass("red"); //选中<tr>标签中包括id属性的元素包装集添加red样式
	$("tr[id*='Sma']").addClass("red"); //选中<tr>标签中包括id属性且id包含Sma字样的元素包装集添加red样式
	$('tr[id]').add('tr[title]').addClass("red"); //选中<tr>标签中包括id属性的元素包装集[或]包括title属性的元素包装集添加red样式
	$("tr[title]").not("tr[title*='c++']").addClass("red"); //选中<tr>标签中包括title属性的元素但title不包括c++的包装集
	$("tr[title]").filter("tr[title*='c++']").addClass("red"); //选中<tr>标签中包括title属性的元素且title包括c++字样的包装集
</script>

状态选择

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

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>
		<!--	E:hover、E:focus、E:active 指经过、获取焦点和激活  -->
		<form>
			<p>姓名：<input type="text" name="name" /> </p>
			<p>地址：<input type="text" name="address" /> </p>
		</form>

		<!-- E:enabled、E:disabled 指元素可用、不可用 -->
		<div id="d1">
			<input type="text" value="可用" />
			<input type="text" disabled="disabled" value="不可用" />
		</div>

		<!--	E:default、E:checked、E:indeterminate  选择框的三种状态 -->
		<div id="d2">
			<input type="checkbox" checked="checked" />
			<input type="checkbox" />
			<input type="radio" name="radio" />
			<input type="radio" name="radio" />
		</div>

		<!-- E::selection 文本被选中时的状态 -->
		<div id="d3">
			<p>我是文本</p>
		</div>

		<!-- E~E1 选中E元素的所有E1兄弟元素 -->
		<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>

效果图：

过滤选择

过滤选择器包括：

: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>

效果图：

黄泽平

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
CSS3 选择器的用法总结

本篇博客主要针对CSS3一个很常用的知识点进行归纳总结，那就是选择器。目的：通过选择器的使用，开发者可以快速地选取到目标元素。本篇通过以下几方面介绍选择器：通配符直接子节点常用伪类选择位置选择属性选择状态选择过滤选择通配符通配符包括三种：（1）通配符^，表示开头匹配。（2）通配符$，表示结尾匹配。（3）通配符*，表示包含匹配。它的用法如下：&...
复制链接

扫一扫