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

CSS高级选择器与优先级

news 2026/7/23 12:20:01

CSS高级选择器与优先级

1. 前言

CSS选择器是CSS的核心概念之一，它决定了样式规则如何应用到HTML元素上。本文将深入探讨CSS高级选择器的使用方法和优先级计算规则，帮助你更精确地控制样式应用。

2. 基础选择器

2.1 元素选择器

选择特定类型的HTML元素：

p { color: red; } div { margin: 10px; }

2.2 ID选择器

选择具有特定ID的元素：

#header { background-color: blue; } #footer { padding: 20px; }

2.3 类选择器

选择具有特定类名的元素：

.button { padding: 10px; } .card { border: 1px solid #ddd; }

2.4 属性选择器

选择具有特定属性的元素：

[href] { color: blue; } [type="text"] { border: 1px solid #ddd; }

3. 组合选择器

3.1 后代选择器

选择某个元素的后代元素：

.container p { margin: 5px; } nav a { text-decoration: none; }

3.2 子选择器

选择某个元素的直接子元素：

.container > p { color: red; } ul > li { list-style: none; }

3.3 相邻兄弟选择器

选择某个元素的下一个相邻兄弟元素：

h1 + p { font-size: 18px; } div + div { margin-top: 20px; }

3.4 通用兄弟选择器

选择某个元素之后的所有兄弟元素：

h1 ~ p { color: gray; } div ~ div { border-top: 1px solid #ddd; }

4. 伪类选择器

4.1 状态伪类

根据元素的状态选择元素：

/* 链接状态 */ a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: green; } /* 表单状态 */ input:focus { border-color: blue; outline: none; } /* 启用/禁用状态 */ button:enabled { background-color: blue; } button:disabled { background-color: gray; }

4.2 结构伪类

根据元素在文档树中的位置选择元素：

/* 第一个子元素 */ ul li:first-child { font-weight: bold; } /* 最后一个子元素 */ ul li:last-child { color: red; } /* 第n个子元素 */ ul li:nth-child(2) { background-color: yellow; } /* 奇数/偶数子元素 */ tr:nth-child(odd) { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #ffffff; }

4.3 目标伪类

选择当前活动的锚点元素：

:target { background-color: yellow; }

4.4 否定伪类

选择不匹配指定选择器的元素：

p:not(.special) { color: gray; } input:not([type="submit"]) { width: 100%; }

5. 伪元素选择器

5.1 内容伪元素

在元素内容前后插入内容：

/* 在元素前插入内容 */ blockquote::before { content: """; font-size: 40px; color: #999; } /* 在元素后插入内容 */ blockquote::after { content: """; font-size: 40px; color: #999; }

5.2 选择伪元素

选择元素的特定部分：

/* 选择第一个字母 */ p::first-letter { font-size: 2em; font-weight: bold; } /* 选择第一行 */ p::first-line { font-weight: bold; } /* 选择选中的文本 */ ::selection { background-color: yellow; color: black; }

6. 优先级计算

6.1 优先级规则

CSS优先级从高到低排序：

内联样式：直接在元素上使用style属性
ID选择器：#id
类选择器、属性选择器、伪类选择器：.class、[attr]、:hover等
元素选择器、伪元素选择器：div、p、::before等

6.2 优先级计算方法

使用四元组(a, b, c, d)来表示优先级：

a：内联样式（0或1）
b：ID选择器的数量
c：类选择器、属性选择器、伪类选择器的数量
d：元素选择器、伪元素选择器的数量

比较优先级时，从左到右依次比较，直到找到差异。

6.3 优先级示例

选择器	优先级计算	优先级顺序
`style=""`	(1, 0, 0, 0)	最高
`#header`	(0, 1, 0, 0)	高
`.nav`	(0, 0, 1, 0)	中
`div`	(0, 0, 0, 1)	低
`*`	(0, 0, 0, 0)	最低

6.4`!important`规则

!important可以覆盖任何优先级：

p { color: red !important; } /* 即使下面的选择器优先级更高，也会被上面的!important覆盖 */ #content p { color: blue; }

7. 选择器最佳实践

7.1 选择器的性能

避免过度使用复杂选择器：复杂选择器会降低渲染性能
优先使用类选择器：类选择器性能较好，且便于维护
避免使用通用选择器：*选择器会匹配所有元素，性能较差

7.2 选择器的可维护性

使用语义化的类名：类名应该反映元素的用途，而不是样式
避免使用ID选择器：ID选择器优先级过高，难以覆盖
保持选择器简洁：简洁的选择器更容易理解和维护

7.3 选择器的特异性

合理使用特异性：根据需要选择适当特异性的选择器
避免使用!important：除非必要，否则不要使用!important
使用继承：利用CSS的继承特性，减少选择器的使用

8. 实际应用案例

8.1 导航菜单

/* 基础导航样式 */ .nav { display: flex; list-style: none; padding: 0; margin: 0; } /* 导航项 */ .nav li { margin-right: 20px; } /* 导航链接 */ .nav a { text-decoration: none; color: #333; padding: 10px; display: block; } /* 导航链接 hover 状态 */ .nav a:hover { color: blue; background-color: #f0f0f0; } /* 活跃导航项 */ .nav li.active a { color: blue; font-weight: bold; }

8.2 表单样式

/* 表单容器 */ .form { max-width: 600px; margin: 0 auto; } /* 表单组 */ .form-group { margin-bottom: 20px; } /* 标签 */ .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } /* 输入框 */ .form-group input[type="text"], .form-group input[type="email"], .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } /* 输入框 focus 状态 */ .form-group input:focus, .form-group textarea:focus { outline: none; border-color: blue; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } /* 错误状态 */ .form-group.error input, .form-group.error textarea { border-color: red; } /* 错误消息 */ .form-group .error-message { color: red; font-size: 12px; margin-top: 5px; }

8.3 卡片布局

/* 卡片容器 */ .card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } /* 卡片 */ .card { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.3s ease; } /* 卡片 hover 状态 */ .card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); } /* 卡片图片 */ .card-img { width: 100%; height: 200px; object-fit: cover; } /* 卡片内容 */ .card-content { padding: 20px; } /* 卡片标题 */ .card-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } /* 卡片描述 */ .card-description { color: #666; margin-bottom: 15px; } /* 卡片按钮 */ .card-button { display: inline-block; padding: 8px 16px; background-color: blue; color: white; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; } /* 卡片按钮 hover 状态 */ .card-button:hover { background-color: darkblue; }