当前位置：首页 > news >正文

css的选择器

news 2025/8/5 14:34:27

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

基本选择器

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

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

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

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

层叠规则

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

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

示例

<!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>