CSS3 选择器的用法总结

本篇博客主要针对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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值