复杂选择器可以通过(id的个数,class的个数,标签的个数)的形式,计算权重。
如果我们需要将某个选择器的某条属性提升权重,可以在属性后面写!important;注意!importent要写在;前面 很多公司不允许使用!important,因为这会带来不经意的样式冲突。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
权重(2, 0, 1)
*/
#box1 #box2 p {
color: red;
}
/*
权重(2, 1, 2)
*/
#box1 div.box2 #box3 p {
color: green;
}
/*
权重(0, 3, 1)
*/
.box1 .box2 .box3 p {
color: blue;
}
/*
权重(0, 1, 1)
*/
.list li {
color: red;
}
/*
权重(0, 1, 0)
*/
.spec {
color: blue !important;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我是段落</p>
</div>
</div>
</div>
<ul class="list">
<li>列表项</li>
<li class="spec">列表项</li>
<li class="spec">列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>
</html>