css的选择器 - 技术栈

CSS（层叠样式表）选择器用于选择 HTML 元素并应用样式。以下是一些基本的 CSS 选择器及其执行优先级（即选择器的特异性和层叠顺序）。

基本选择器

通用选择器（Universal Selector）：
- 选择所有元素。
- 语法：*
css 复制代码
```
* {
    margin: 0;
    padding: 0;
}
```
类型选择器（Type Selector）：
- 选择特定类型的元素。
- 语法：element
css 复制代码
```
p {
    color: blue;
}
```
类选择器（Class Selector）：
- 选择具有特定类的元素，类名以 . 开头。
- 语法：.classname
css 复制代码
```
.highlight {
    background-color: yellow;
}
```
ID 选择器（ID Selector）：
- 选择具有特定 ID 的元素，ID 以 # 开头。
- 语法：#idname
css 复制代码
```
#header {
    font-size: 24px;
}
```
属性选择器（Attribute Selector）：
- 选择具有特定属性的元素。
- 语法：[attribute] 或 [attribute="value"]
css 复制代码
```
input[type="text"] {
    border: 1px solid #ccc;
}
```
伪类选择器（Pseudo-class Selector）：
- 选择处于特定状态的元素。
- 语法：element:pseudo-class
- :hover：当鼠标悬停在元素上时应用样式。
  :focus：当元素获得焦点时应用样式。
  :active：当元素被激活（如被点击）时应用样式。
  :nth-child(n)：选择父元素的第 n 个子元素。
  :first-child：选择父元素的第一个子元素。
  :last-child：选择父元素的最后一个子元素。
css 复制代码
```
a:hover {
    color: red;
}
```
伪元素选择器（Pseudo-element Selector）：
- 选择元素的特定部分。
- 语法：element::pseudo-element
- ::before：在元素内容之前插入内容。
  ::after：在元素内容之后插入内容。
  ::first-line：选择元素的第一行文本。
  ::first-letter：选择元素的第一个字母。
css 复制代码
```
p::first-line {
    font-weight: bold;
}
```
组合选择器（Combinator Selector）：
- 选择与其他元素关系的元素。
- 语法：
  - 后代选择器 ：ancestor descendant
  - 子选择器 ：parent > child
  - 相邻兄弟选择器 ：prev + next
  - 一般兄弟选择器 ：prev ~ siblings
css 复制代码
```
div p {
    color: green; /* 后代选择器 */
}
```

执行先后顺序（特异性和层叠）

CSS 的选择器执行顺序由特异性（Specificity）和层叠（Cascade）规则决定。以下是特异性的计算规则：

内联样式（Inline styles）：
- 直接在元素的 style 属性中定义的样式，特异性最高。
- 特异性：1000
ID 选择器：
- 每个 ID 选择器的特异性为 100。
- 特异性：100
类、伪类和属性选择器：
- 每个类、伪类或属性选择器的特异性为 10。
- 特异性：10
类型选择器和伪元素选择器：
- 每个类型选择器或伪元素选择器的特异性为 1。
- 特异性：1
通用选择器：
- 通用选择器的特异性为 0。
- 特异性：0

层叠规则

当多个选择器匹配同一元素时，CSS 将根据以下规则决定应用哪个样式：

特异性：特异性高的选择器优先级更高。
来源顺序：如果特异性相同，后定义的样式将覆盖先前定义的样式。
重要性 ：使用 !important 声明的样式将覆盖其他样式（即使它们的特异性更高）。

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Selectors</title>
    <style>
        /* 通用选择器 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 类型选择器 */
        p {
            color: blue;
        }

        /* 类选择器 */
        .highlight {
            color: yellow;
        }

        /* ID 选择器 */
        #main {
            color: red;
        }

        /* 内联样式 */
        <p style="color: green;">This is a paragraph.</p>
    </style>
</head>
<body>
    <div id="main">
        <p class="highlight">This is a highlighted paragraph.</p>
        <p>This is a normal paragraph.</p>
    </div>
</body>
</html>

在这个示例中，特异性和层叠规则将决定每个段落的颜色。内联样式的段落将显示为绿色，因为它具有最高的特异性。