CSS3高级选择器解释及案例

最新推荐文章于 2024-03-05 14:35:41 发布

纪水一

最新推荐文章于 2024-03-05 14:35:41 发布

阅读量1k

点赞数 1

分类专栏：网页文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_49349476/article/details/126695406

版权

网页专栏收录该内容

6 篇文章 1 订阅

订阅专栏

选择器	描述
fist-of-type	p:fist-of-type 选择属性其父元素的首个<p>元素
last-of-type	p:last-of-type 选择属性其父元素的最后<p>元素
only-of-type	p:only-of-type 选择属性其父元素唯一的<p>元素
fist-child	p:first-child 选择属性其父元素的第一个<p>子元素
last-child	p:last-child:选择属性其父元素的最后一个<p>子元素
nth-child(n)	p:nth-child(n)选择属性其父元素的第n个<p>子元素
:before	p:before 在每个<p>元素的内容之前插入内容
:after	p:after 在每个<p>元素的内容之前插入内容

1、fist-of-type：

如代码所示，在样式中给p标签加入背景颜色，fist-of-type会选择第一个p标签，因为fist-of-type是作用在p标签上，所以，如果在p标签之前还有其他元素，比如有h2标签，依旧还是选择第一个p标签，不会选择h2标签，结果如图2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p:first-of-type{
				background: steelblue;
			}
		</style>
	</head>
	<body>
		<div>
			<h2>第一个h2</h2>
			<p>1</p>
			<p>2</p>
			<p>3</p>
		</div>
	</body>
</html>

2、last-of-type：

和fist-of-type相反，fist-of-type是选择到一个，而last-of-type是选择到最后一个。如代码所示，在样式中给p标签加入背景颜色，last-of-type会选择最后一个p标签，同样，因为last-of-type是在作用在p标签，所以，哪怕p标签之后还有标签，依旧不会被选择。如图2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			p:last-of-type{
				background: steelblue;
			}
		</style>
	</head>
	<body>
        <div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
            <h2>第一个h2</h2>
		</div>
	</body>
</html>

3、only-of-type

如代码所示，在样式中给p标签加入背景颜色，only-of-type会选择唯一的p标签，如果p标签存在多个，则only-of-type不会选择，此时only-of-type将无法发挥其作用。h2是唯一的标签，当only-of-type作用于h2标签，因为h2是唯一的标签，only-of-type会选择到好h2标签，样式将会产生作用，如图3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			p:only-of-type{
				background: steelblue;
			}
			h2:only-of-type{
				background: steelblue;
			} 
		</style>
	</head>
	<body>
		<div>
			<p>1</p>
			<p>2</p>
			<h2>第一个h2</h2>
			<p>3</p>
		</div>
	</body>
</html>

4、fist-child

如代码所示，将fist-child作用于p标签，样式中给p标签加入背景颜色，fist-child会选择p标签的父元素（div）下第一个标签p孩子。此时要满足p标签是父元素下第一个孩子，fist-child才发挥作用，将fist-child作用于h2标签，因为，h2标签不是其父元素（div）下的第一个孩子，所以fist-child将无法选择到h2标签，结果如图4

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			p:first-child{
				background: steelblue;
			}
			h2:first-child{
				background: steelblue;
			}
		</style>
	</head>
	<body>
		<div>
			<p>1</p>
			<h2>第一个h2</h2>
			<p>2</p>
			<p>3</p>
		</div>
	</body>
</html>

5、last-child

last-child和fist-child相反，如代码所示，将last-child作用于p标签，last-child会选择p标签的父元素（div）下最后一个p标签孩子，也同样，如果p标签不是其父元素下的最后一个标签，将无法其作用，代码中，p标签不是父元素下的最后一个孩子，所以last-child无法选择到最后一个p标签，而h2标签是父元素下最后一个孩子，当将last-child作用于h2标签时，last-child可以选择到最后一个h2标签，如图5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			p:last-child{
				background: steelblue;
			}
			h2:last-child{
				background: steelblue;
			}
		</style>
	</head>
	<body>
		<div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<h2>第一个h2</h2>
		</div>
	</body>
</html>

6、nth-child(n)

将nth-child(n)作用于p标签，nth-child(n)是选择父元素（div）下的第n个孩子，如果第n个标签不是p标签，nth-child()将无法起作用。如代码所示，实验一中的nth-child(1)会选择p标签父元素（div）下的一个孩子，因为第一个孩子是h2标签，不是p标签，所以无法选择到。而实验二中的nth-child(2)会选择得到父元素下第二个孩子，第二个孩子是p标签，满足条件，所以nth-child(2)起到作用，如图6.

一些关于n的特殊取值如下表

n的值	意义
-n+m	前m个孩子
n+m	第m个孩子之后
odd	奇数孩子
even	偶数孩子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			p:nth-child(1){ /* 实验一 */
				background: steelblue;
			}
			p:nth-child(2){ /* 实验二 */
				background: red;
			}
		</style>
	</head>
	<body>
		<div>
			<h2>第一个h2</h2>
			<p>1</p>
			<p>2</p>
			<p>3</p>
		</div>
	</body>
</html>

如果要选择第m个孩子以后，则n的值为n+m,如果要选择第m个孩子以前，则n的值为-n+m，案例如下，前三段背景颜色为蓝色，第四段之后背景颜色为红色。结果如图7

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			p:nth-child(-n+3){
				background: steelblue;
			}
			p:nth-child(n+4){
				background: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
			<p>7</p>
			<p>8</p>
			<p>9</p>
		</div>
	</body>
</html>

此外，当n的值为odd，则选择奇数行，n的值为even，则选择偶数行。案例如下，结果如图8

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			p:nth-child(odd){
				background: steelblue;
			}
			p:nth-child(even){
				background: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
			<p>7</p>
			<p>8</p>
			<p>9</p>
		</div>
	</body>
</html>

7、:before

代码如下，将:before作用于标签p，会在每个<p>元素的内容之前插入内容，插入的内容放在content: " "的双引号内，:before只会选择p标签，而不会选择到其他标签，结果如图9

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			p:before{
				content: "￥";
			}
		</style>
	</head>
	<body>
		<div>
			<h2>第一个h2</h2>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
		</div>
	</body>
</html>

8、:after

:after和:before相反，:after会将内容插入在对象标签之后，也同样，不会选择到其他标签，代码如下，如果如图10

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			p:after{
				content: "。";
			}
			
		</style>
	</head>
	<body>
		<div>
			<h2>第一个h2</h2>
			<p>1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			
		</div>
	</body>
</html>