CSS 优先级与继承：如何写出完美的 CSS 代码

CSS 优先级与继承

CSS 是一门用于网页外观的语言，它允许你对网页中的元素进行样式设置。CSS 优先级和继承是两个非常重要的概念，它们决定了 CSS 样式的应用顺序和作用范围。

CSS 选择器类型

1. HTML 元素选择器

选择器类型是CSS的基础，共包括8种，分别是：

• HTML元素选择器
• 类选择器
• ID选择器
• 通配符选择器
• 子选择器
• 后代选择器
• 相邻兄弟选择器
• 通用兄弟选择器

2. 类选择器

CSS的选择器类型中，类选择器以"."开头，用于选择具有特定类名的元素。例如：

.class-name {
  color: red;
}

以上代码将使所有具有class-name类名的元素的文本颜色变为红色。

3. ID 选择器

CSS的选择器类型中，ID选择器以"#"开头，用于选择具有特定ID的元素。例如：

#element-id {
  color: blue;
}

以上代码将使具有element-id ID的元素的文本颜色变为蓝色。

选择器权重
CSS 选择器的权重决定了其在与其他选择器冲突时，哪个选择器将被应用。权重越高，选择器的优先级越高。

选择器权重的计算规则如下：

• 每种选择器类型都有一个默认的权重。
• 某些选择器类型可以组合使用，组合后的权重是各个选择器类型权重之和。
• 如果选择器中包含多个相同类型的选择器，则最后一个选择器的权重最高。

选择器权重的注意点：

• 选择器类型权重递增。 具体递增规则如下：

1.HTML 元素选择器：10
2.类选择器：100
3.ID选择器：1000
4.通配符选择器：0
5.子选择器：10
6.后代选择器：10
7.相邻兄弟选择器：10
8.通用兄弟选择器：0

• 伪类、伪元素选择器会提高选择器的权重。 例如：:hover、:active等伪类选择器，权重加100；:first-child、:last-child等伪元素选择器，权重加100。

• 内联样式的权重最高。 如果同时存在内联样式和外部样式表，则内联样式将被优先应用。

权重叠加

如果多个选择器具有相同的权重，则浏览器将根据以下规则来确定哪个选择器将被应用：

• 最具体的 选择器将被应用。
• 如果选择器具有相同的具体性，则最后一个 选择器将被应用。

可继承与不可继承属性

CSS 属性分为可继承属性和不可继承属性。可继承属性可以被子元素继承，而不可继承属性则不能被子元素继承。

可继承属性

可继承属性包括：

• 文本属性：字体、字号、颜色等
• 盒模型属性：边框、边距、内边距等
• 背景属性：背景颜色、背景图片等
• 列表属性：列表类型、列表样式、列表位置等
• 表格属性：边框、边距、单元格间距等

不可继承属性

不可继承属性包括：

• 链接属性：链接颜色、链接样式等
• 定位属性：定位类型、定位偏移量等
• 浮动属性：浮动方向、浮动偏移量等
• 清除属性：清除浮动等
• 转换属性：平移、缩放、旋转等

结语

CSS 优先级和继承是 CSS 中非常重要的两个概念，掌握它们可以帮助你写出更简洁、更易维护的 CSS 代码。