常见 CSS 选择器、优先级计算及可继承属性介绍

CSS 选择器是用于选择 HTML 元素并应用样式规则的工具。以下是常见的 CSS 选择器及其优先级计算方式，以及可继承的 CSS 属性。

常见的 CSS 选择器

1. 元素选择器：选择特定类型的 HTML 元素。

   p { color: red; }
   

2. 类选择器：选择具有特定类名的元素。

   .my-class { color: blue; }
   

3. ID 选择器：选择具有特定 ID 的元素。

   #my-id { color: green; }
   

4. 属性选择器：选择具有特定属性或属性值的元素。

   [type="text"] { color: purple; }
   

5. 伪类选择器：选择元素的特定状态。

   a:hover { color: orange; }
   

6. 伪元素选择器：选择元素的特定部分。

   p::first-line { color: pink; }
   

7. 后代选择器：选择某个元素的后代元素。

   div p { color: brown; }
   

8. 子选择器：选择某个元素的直接子元素。

   div > p { color: yellow; }
   

9. 相邻兄弟选择器：选择紧接在另一个元素后的元素。

   h1 + p { color: gray; }
   

10. 通用选择器：选择所有元素。

    * { margin: 0; }
    

优先级计算

CSS 选择器的优先级是通过一个权重系统来计算的，通常表示为 (a, b, c, d)，其中：

• a：内联样式（style 属性）的权重。
• b：ID 选择器的数量。
• c：类选择器、属性选择器和伪类的数量。
• d：元素选择器和伪元素的数量。

优先级从高到低依次为：

1. 内联样式（style 属性）：(1, 0, 0, 0)
2. ID 选择器：(0, 1, 0, 0)
3. 类选择器、属性选择器、伪类：(0, 0, 1, 0)
4. 元素选择器、伪元素：(0, 0, 0, 1)

优先级比较时，从左到右依次比较 a、b、c、d 的值，值大的优先级高。如果值相同，则后定义的样式会覆盖先定义的样式。

可继承的 CSS 属性

并非所有 CSS 属性都可以继承，以下是一些常见的可继承属性：

• 文本相关属性：

  • color
  • font-family
  • font-size
  • font-style
  • font-weight
  • line-height
  • text-align
  • text-indent
  • text-transform
  • letter-spacing
  • word-spacing

• 列表相关属性：

  • list-style-type
  • list-style-position
  • list-style-image

• 表格相关属性：

  • border-collapse
  • border-spacing

• 其他属性：

  • visibility
  • cursor

总结

• CSS 选择器：包括元素选择器、类选择器、ID 选择器、属性选择器、伪类选择器、伪元素选择器、后代选择器、子选择器、相邻兄弟选择器和通用选择器。
• 优先级计算：通过 (a, b, c, d) 权重系统计算，内联样式优先级最高，ID 选择器次之，类选择器、属性选择器和伪类再次之，元素选择器和伪元素优先级最低。
• 可继承属性：主要包括文本、列表、表格相关属性以及其他一些属性。

理解这些概念有助于编写更高效、可维护的 CSS 代码。