CSS详解：特性、选择器与优先级

news2025/5/20 21:44:44

CSS详解：特性、选择器与优先级

CSS详解：特性、选择器与优先级
- 一、CSS的核心特性
- - 1. 层叠性（Cascading）
  - 2. 继承性（Inheritance）
  - 3. 优先级（Specificity）
  - 4. 响应式设计
  - 5. 动画与过渡
- 二、CSS选择器详解
- - 1. 基本选择器
  - 2. 组合选择器
  - 3. 属性选择器
  - 4. 伪类选择器
  - 5. 伪元素选择器
- 三、CSS优先级（Specificity）详解
- - 1. 优先级计算规则
  - - 例子
  - 2. !important的作用
  - 3. 层叠顺序
- 四、实战示例
- 五、总结

CSS（Cascading Style Sheets，层叠样式表）是前端开发中不可或缺的技术之一。它负责网页的外观和布局，与HTML结构和JavaScript行为共同构建了现代网页。本文将详细介绍CSS的核心特性、选择器的种类及其优先级（Specificity），帮助你更好地理解和运用CSS。

一、CSS的核心特性

1. 层叠性（Cascading）

CSS的“层叠”指的是当多个样式规则作用于同一元素时，浏览器会根据一定的规则决定最终应用哪一条样式。这些规则包括样式来源（如浏览器默认样式、外部样式表、内联样式等）、选择器优先级和声明顺序。

2. 继承性（Inheritance）

某些CSS属性会从父元素继承到子元素。例如，color、font-family等文本相关属性会自动传递给子元素，而margin、padding等布局属性则不会继承。可以通过inherit、initial、unset等关键字手动控制继承行为。

3. 优先级（Specificity）

当多个规则作用于同一元素时，优先级决定了哪条规则生效。优先级由选择器的类型和数量决定，后文将详细介绍。

4. 响应式设计

CSS支持媒体查询（Media Queries），可以根据不同的设备和屏幕尺寸应用不同的样式，实现响应式布局。

5. 动画与过渡

CSS3引入了动画（@keyframes）和过渡（transition）属性，使网页交互更加丰富和流畅。

二、CSS选择器详解

选择器用于选中HTML文档中的元素，以便为其应用样式。选择器的种类丰富，灵活组合可以实现复杂的样式控制。

1. 基本选择器

元素选择器：选中所有指定标签的元素
```
p { color: blue; }
```
类选择器：选中所有带有指定class的元素
```
.highlight { background: yellow; }
```
ID选择器：选中指定id的元素（页面唯一）
```
#header { font-size: 2em; }
```
通配符选择器：选中所有元素
```
* { box-sizing: border-box; }
```

2. 组合选择器

后代选择器：选中某元素内部的所有指定后代元素
```
.nav a { color: red; }
```
子元素选择器：只选中直接子元素
```
ul > li { list-style: none; }
```
相邻兄弟选择器：选中紧跟在某元素后的指定元素
```
h2 + p { margin-top: 0; }
```
通用兄弟选择器：选中同级后面所有指定元素
```
h2 ~ p { color: gray; }
```

3. 属性选择器

存在属性

input[required] { border: 1px solid red; }

属性值等于
```
a[target="_blank"] { color: orange; }
```
属性值包含
```
[class~="btn"] { padding: 10px; }
```

属性值以某字符串开头/结尾/包含

a[href^="https"] { color: green; }
a[href$=".pdf"] { color: red; }
a[href*="example"] { font-weight: bold; }

4. 伪类选择器

结构伪类

li:first-child { font-weight: bold; }
li:last-child { color: blue; }
li:nth-child(2n) { background: #eee; }

状态伪类

a:hover { text-decoration: underline; }
input:focus { border-color: blue; }

5. 伪元素选择器

常用伪元素

p::first-line { font-size: 1.2em; }
p::first-letter { color: red; }
div::before { content: "★"; }
div::after { content: "☆"; }

三、CSS优先级（Specificity）详解

当多个选择器选中同一元素并设置了相同的属性时，浏览器会根据优先级规则决定最终应用哪一条样式。

1. 优先级计算规则

优先级由四个部分组成，通常用(a, b, c, d)表示：

a：内联样式（如style="..."），有最高优先级
b：ID选择器的数量
c：类选择器、属性选择器、伪类的数量
d：元素选择器、伪元素的数量

优先级比较时，从左到右依次比较，遇到高的就确定胜负。

例子

选择器	优先级
`#header`	(0,1,0,0)
`.nav .item`	(0,0,2,0)
`ul li a`	(0,0,0,3)
`a:hover`	(0,0,1,1)
`style="color:red"`	(1,0,0,0)

2. !important的作用

!important可以提升某条样式的优先级，使其覆盖其他规则。但应谨慎使用，避免维护困难。

p { color: blue !important; }

3. 层叠顺序

当优先级相同时，后写的规则会覆盖前面的规则。

四、实战示例

<!DOCTYPE html>
<html>
<head>
  <style>
    p { color: black; }                /* (0,0,0,1) */
    .highlight { color: orange; }      /* (0,0,1,0) */
    #main { color: green; }            /* (0,1,0,0) */
    p.highlight { color: blue; }       /* (0,0,1,1) */
    p { color: red !important; }       /* (0,0,0,1) + !important */
  </style>
</head>
<body>
  <p id="main" class="highlight">Hello CSS!</p>
</body>
</html>