切图时是不是经常性的写了样式无效呢? 半死不得其解吧
为什么自己的样式老是被抵掉了呢? 为什么老是用important 来搞事呢?
我猜应该是CSS权重问题,没有理解透彻吧
下来用几个例子说明下CSS的权重。
<p class='p2' id="p2"> daasd </p>
复制代码
p {
color: red; /* 权重 1 */
}复制代码
.p2 {
color: yellow; /* 权重 10 */
}复制代码
#p2 {
color: blue; /* 权重 100 */
}复制代码
<p style="color:pink;" class='p2' id="p2"> daasd </p> // 权重1000
许多人会问,难道不会被后面的class id 覆盖掉? 回答: 不会 行内权重大于类和ID复制代码
p {
color: red !important; /* 权重 1 + important */ 所以现在他最大,同时也大于行内式 style=""
}
.p2 {
color: yellow; /* 权重 10 */
}
#p2 {
color: yellow; /* 权重 100 */
}
复制代码
<p style="color:pink !important;" class='p2' id="p2"> daasd </p> // 无人能超越 行内 !important复制代码
<div id="div">
<p class="p2" id="p3">daasd</p> //当然也会存在多个标签嵌套
</div>复制代码
#div p { /* 此时权重为 100 + 1 */ 大于下面两个
color:red;
}
.p2 { /* 权重为 10 */
color:yellow;
}
#p3 { /* 权重为 100 */
color:blue;
}
复制代码
又或者是一个更复杂的嵌套呢 ?
<div id="div" class="div-class">
<div id="div1" class="div1-class">
<div id="div2" class="div2-class">
<div id="div3" class="div3-class">
<p class="ap" id="p">daasd</p>
</div>
</div>
</div>
</div>复制代码
#div p { /* 权重 100 + 1 */
color: red;
}
/* #div p { /* 权重 100 + 1 + important */ 加上我最大
color: red !important;
} */
#div #div1 p { /* 权重 100 + 100 + 1 */
color: pink;
}
#div #div1 #div2 p { /* 权重 100 + 100 + 100 + 1 */
color: yellow;
}
#div #div1 #div2 #div3 p { /* 权重 100 + 100 + 100 + 100 + 1 */
color: blue;
}
复制代码
.div-class #div1 .div2-class .div2-class p { /* 10 + 100 +10 + 10 + 1 */
color:red;
}
#div .div1-class #div2 .div3-class p { /* 100 + 10 + 100 + 10 + 1 */
color:blue;
}
#div #div1 #div2 .div3-class p { /* 100 + 100 + 100 + 10 + 1 */
color:pink;
}
#div #div1 .div2-class .div3-class p { /* 100 + 100 + 10 + 10 + 1 */
color:black;
}
#div #div1 .div2-class .div3-class #p { /* 100 + 100 + 10 + 10 + 100 */
color:yellow;
}
#div #div1 .div2-class .div3-class .ap { /* 100 + 100 + 10 + 10 + 10 */
color:green;
}
#div #div1 .div2-class #div3 .ap { /* 100 + 100 + 10 + 100 + 10 */
color:aqua;
}复制代码
分析得出最后一个最大 权重为 320 覆盖上面所有的。
嵌套越多,权重就越大,除过!important,有important 还是人家最大 。
(但需要注意的是嵌套期间 id class 标签的计算)
下面说说伪元素和伪类的权重
伪元素的权重,相当于类元素的权重
<p class='p2' id="p2"> daasd </p>
p {
color: red; /* 权重 1 */
}
p:hover { /* 类似 :hover,:visited,:active,:link 都代表是伪元素 */
color: yellow; /* 权重 1 + hover权重(10) */
}
.p2:hover { /* 如果是类 权重 + 10 + hover 权重 会抵掉上面的 */
color: blue;
}
#p2:hover { /* 如果是id 权重 + 100 + hover 权重 会抵掉上面的 */
color: pink;
}
/* 如果其中一个加了!important,如果都加的话,还是id权重高,抵掉所有的 */
p:hover { /* 这里我最大,会抵掉上面的所有 */
color: black !important; /* 权重 1 + hover权重(10) + important权重 */
}
复制代码
没有指上去的时候是这个效果
标签伪类指上去是这个效果
类 伪类指上去是这个效果 (抵掉标签伪类)
id 伪类指上去是这个效果 (抵掉类伪类)
标签伪类加上!important 指上去是这个效果 (抵掉上面所有)
因为伪类的权重相当于类元素,故因为类元素的权重小于id元素的权重,所以下面这个设置:hover无效的。
p {
color: red; /* 1 */
}
#p {
color: pink; /* 100 */
}
.p:hover {
color: blue; /* 10 + 10 */
}
复制代码
始终为粉色
p {
color: red; /* 1 */
}
#p {
color: pink; /* 100 */
}
#p:hover {
color: aqua; /* 100 + 100 */
}复制代码
指上去是浅绿色
伪类的权重,相当于标签元素的权重
<p class='p2' id="p2"> daasd </p>
p {
color: red; /* 权重 1 */
}
p:after { /* 类似 :hover,:visited,:active,:link 都代表是伪元素 */
color: yellow; /* 权重 1 + hover权重(10) */
}复制代码