关于同一元素不同类名的伪类的研究

最新推荐文章于 2021-08-04 08:13:07 发布

百岁如流富贵冷灰

最新推荐文章于 2021-08-04 08:13:07 发布

阅读量637

点赞数 1

文章标签： css 伪类

本文链接：https://blog.csdn.net/qq8241994/article/details/80409583

版权

同一个元素假如有多个类名，分别给每个类名设置伪类，就像这样

<title>测试同一元素多个类下的伪类是否覆盖</title>
    <style type="text/css">
	.app{width: 500px;height: 200px;background:#78b9f9;position: relative;}
	.app:after{content: "--我是app的after伪类--";display: block;}
	.app:before{content: "--我是app的before伪类--";display: block;}
	.test:after{content: "--我是test的after伪类--";display: block;}
	.test:before{content: "--我是test的before伪类--";display: block;}
    </style>
</head>
<body>
	<div class="app test"></div>
</body>

那么最终会有几个伪类呢？是4个？还是2个？不多bb直接上结果

如果把CSS代码的顺序换一下：

.app{width: 500px;height: 200px;background:#78b9f9;position: relative;}
.test:after{content: "--我是test的after伪类--";display: block;}
.app:after{content: "--我是app的after伪类--";display: block;}
.app:before{content: "--我是app的before伪类--";display: block;}
.test:before{content: "--我是test的before伪类--";display: block;}

此时的结果是：

结论：一个元素最多只能有一个after，一个before，最终显示那个类的伪类与css中的类的顺序无关，而是取决于伪类定义的先后顺序；

over

百岁如流富贵冷灰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于同一元素不同类名的伪类的研究

同一个元素假如有多个类名，分别给每个类名设置伪类，就像这样&lt;title&gt;测试同一元素多个类下的伪类是否覆盖&lt;/title&gt; &lt;style type="text/css"&gt; .app{width: 500px;height: 200px;background:#78b9f9;} .app:after{content: "--我是app的after伪类-...
复制链接

扫一扫