css

css

十一月 29, 2021

层叠与继承

冲突规则

在css中对一相同元素的样式的规则会写在最后的会覆盖前面的规则。

1
2
3
4
5
6
p{
    color: red
}
p{
    color: blue
}
1
<p>wsnd</p>

上代码的渲染结果是蓝色，因为蓝色在后面，把前面的红色覆盖了

如果有更精准的定位，就会用有精准定位的规则

1
2
3
4
5
6
.hui{
    color: red
}
p{
    color: blue
}
1
<p class="hui">wsnd</p>

结果是红色

继承

在父类的属性会被子类继承

1
2
3
body{
    color: red
}
1
2
3
4
5
6
<body>
    <p>df</p>
    <ul>
        <li>sd</li>
    </ul>
</body>

df和sd都为红色

但不是去全部的属性都能被继承

控制继承

inherit

设置该属性会使子元素属性和父元素相同。实际上，就是 “开启继承”.

initial

设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为 inherit 。

unset

将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样

用上面的值来控制是否继承

层叠规则

有3个因素

  1. 重要程度
  2. 优先级
  3. 资源顺序

现在让我们来看看浏览器如何计算优先级。我们已经知道一个元素选择器比类选择器的优先级更低会被其覆盖。本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹配。

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

  1. 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
  2. 百位： 选择器中包含ID选择器则该位得一分。
  3. 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
  4. 个位：选择器中包含元素、伪元素选择器则该位得一分。