伪类的优先级?(之前老师的回答,我觉得有问题,但当时手点快了,选择了采用,这里再问一下)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
.block:nth-child(2) {
position: absolute;
top: 20px;
left: 20px;
border-color: red;
}
.block {
width: 80px;
height: 80px;
line-height: 81px;
text-align: center;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="block">A</div>
<div class="block">B</div>
<div class="block">C</div>
</body>
</html>这个代码执行后, .block:nth-child(2)的属性是覆盖了block 的属性的,但是.block 在.block:nth-child(2)后面,那说明.block:nth-child(2)的优先级更高,为什么?
2
收起
正在回答
2回答
同学你好！
class优先级为10只是为了好记认为的去给它添加一个数值
各类选择器的优先级如下：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:hover,li:nth-child）
在这里.block:nth-child(2) 优先级高是 “类选择器+伪类选择器”所以比“类选择器”优先级高
如果帮助到了你 欢迎采纳 祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星