CSS（层叠样式表）选择器的特异度和继承机制是在样式规则应用于元素时起到关键作用的概念。对于开发者来说，深入理解这些概念可以帮助我们更好地掌握样式规则的优先级以及属性值的传递方式。

特异度（Specificity）用于确定哪些样式规则应用于特定的元素。当多个规则应用于同一元素时，特异度决定了哪些规则具有更高的优先级

特异度由四个部分（a，b，c，d）组成，分别代表不同选择器的权重：

  • a 代表 内联样式的特异度，内联样式是直接应用于元素的样式，具有最高的特异度。
  • b 代表 ID选择器的特异度，ID选择器通过#符号定义，能够匹配文档中唯一的元素。
  • c 代表 类选择器、伪类选择器和属性选择器的特异度，类选择器由.定义，伪类选择器以:开头，属性选择器由方括号[]定义。
  • d 代表 元素选择器和伪元素选择器的特异度，元素选择器用于选择特定类型的元素，伪元素选择器以::开头。

特异度的计算规则如下：

  • 每个部分的初始值为0。
  • 对于选择器中的每个ID选择器，增加b的值。
  • 对于选择器中的每个类选择器、伪类选择器和属性选择器，增加c的值。
  • 对于选择器中的每个元素选择器和伪元素选择器，增加d的值。

特异度的比较方式是按照从左到右的顺序依次比较a、b、c和d的值。具有较大特异度值的选择器具有更高的优先级。

注意事项：

  • ！important声明的样式的优先级最高；
  • 如果优先级相同，则最后出现的样式生效；
  • 继承得到的样式的优先级最低
  • 通用选择器(*) 子选择器（>） 和相邻同胞选择器(+)并不在这四个等级中，权值为0
  • 样式表的来源不同，优先级顺序为： *内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式

CSS继承是一种 属性传递机制，子元素可以继承父元素的某些样式属性值。当父元素应用了一些样式属性时，如果子元素没有显式定义这些属性，它们会从父元素继承相应的属性值。

不是所有属性都可以被继承，只有部分属性是可以继承的，例如:

  • 字体系列属性
    • font-family：字体系列
    • font-weight：字体的粗细
    • font-size：字体的大小
    • font-style：字体的风格
  • 文本系列属性
    • text-indent：文本缩进
    • text-align：文本水平对齐
    • line-height：行高
    • word-spacing：单词之间的间距
    • letter-spacing：中文或字母之间的间距
    • text-transform：控制文本大小写
    • color：文本颜色
  • 元素可见性
    • visibility：控制元素显示隐藏
  • 列表布局属性
    • list-style：列表风格，包括list-style-type，list-style-image等
  • 光标属性
    • cursor：光标显示位何种形态

然而，像width、height、margin、padding等属性不会被子元素继承，子元素需要显式地设置自己的值。

需要注意的是，继承是 单向的，子元素可以继承父元素的样式，但 父元素不会继承子元素的样式。

文章作者: Mr. Fortunate
文章链接: https://www.fortunate.cool/2023/08/11/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3CSS%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E7%89%B9%E5%BC%82%E5%BA%A6%E4%B8%8E%E7%BB%A7%E6%89%BF%E6%9C%BA%E5%88%B6/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 fortunate！
学习
相关推荐
评论