CSS 选择器介绍

news2025/4/24 21:56:25

CSS 选择器介绍

1. 基本概念

CSS（层叠样式表）是一种用于描述 HTML 或 XML 文档外观的语言。通过 CSS，可以控制网页中元素的布局、颜色、字体等视觉效果。而 CSS 选择器则是用来指定哪些 HTML 元素应该应用这些样式的工具。

2. 基本选择器

元素选择器（Element Selector）
根据 HTML 元素名称来选择元素。
```
p { color: blue; } /* 所有段落文字颜色为蓝色 */
```

类选择器（Class Selector）
通过 class 属性值来选择元素。以点 . 开头。

.highlight { background-color: yellow; } /* 具有 highlight 类的元素背景色为黄色 */

ID 选择器（ID Selector）
通过 id 属性值来选择唯一的一个元素。以井号 # 开头。
```
#header { font-size: 24px; } /* ID 为 header 的元素字体大小为24像素 */
```
通用选择器（Universal Selector）
匹配所有 HTML 元素，使用星号 * 表示。
```
* { margin: 0; padding: 0; } /* 所有元素的外边距和内边距均为0 */
```

3. 组合选择器

后代选择器（Descendant Combinator）
匹配某个元素的所有后代元素，使用空格分隔。
```
div p { color: red; } /* 所有在 div 内部的 p 元素文字颜色为红色 */
```

子代选择器（Child Combinator）
匹配某个元素的直接子元素，使用 > 符号。

ul > li { list-style-type: none; } /* 无序列表的直接子项 li 元素取消列表符号 */

相邻兄弟选择器（Adjacent Sibling Combinator）
匹配紧接在另一个元素后的元素，使用 + 符号。
```
h2 + p { font-weight: bold; } /* 跟在 h2 后的下一个 p 元素字体加粗 */
```
一般兄弟选择器（General Sibling Combinator）
匹配同一个父元素下的所有同类型兄弟元素，使用 ~ 符号。
```
li ~ li { color: green; } /* 所有 li 元素中第二个及以后的字体颜色为绿色 */
```

4. 伪类选择器

:link 和 :visited
用于链接的状态，分别表示未访问和已访问。

a:link { color: blue; } /* 链接初始状态颜色为蓝色 */
a:visited { color: purple; } /* 访问过的链接颜色为紫色 */

:hover
当鼠标悬停在元素上时触发。

button:hover { background-color: orange; } /* 悬停时按钮背景色变为橙色 */

:active
表示被激活的元素，通常用于点击状态。

a:active { color: red; } /* 点击链接时颜色为红色 */

:focus
用于表单元素获得焦点时的状态。

input:focus { border: 2px solid blue; } /* 输入框获得焦点时边框变为蓝色 */

:nth-child(n) 和 :nth-of-type(n)
分别匹配第 n 个子元素和第 n 个同类型子元素。
```
ul li:nth-child(2) { color: red; } /* 列表中第二个元素文字颜色为红色 */
```

:empty
匹配没有内容的元素（不含文本节点）。

div:empty { display: none; } /* 没有内容的 div 元素隐藏 */

5. 属性选择器

[attribute]
匹配具有指定属性的元素。

a[href] { color: blue; } /* 所有带有 href 属性的链接颜色为蓝色 */

[attribute=value]
匹配属性值完全匹配的元素。

img[src="logo.png"] { width: 200px; } /* src 为 logo.png 的图片宽度设为200像素 */

[attribute^=value]、[attribute$=value]、[attribute=value]*
分别匹配属性值以 value 开头、结尾和包含 value。
```
a[href^="https"] { color: green; } /* href 以 https 开头的链接颜色为绿色 */
```

6. 伪元素选择器

::before 和 ::after
在元素内容前或后插入内容，常用于添加图标、引号等。
```
blockquote::before { content: "❝"; } /* 引用块前插入引号 */
```
::first-line 和 ::first-letter
分别匹配段落的第一行和第一个字母。
```
p::first-line { font-weight: bold; } /* 段落第一行字体加粗 */
```

::selection
匹配用户选中的内容。

::selection { background-color: lightblue; } /* 选中文本背景色为浅蓝色 */

7. 高级选择器

:not(selector)
匹配不满足指定条件的元素。

:not(.highlight) { color: gray; } /* 不具有 highlight 类的元素颜色为灰色 */

:enabled 和 :disabled
用于表单元素，分别表示启用和禁用状态。

input:disabled { opacity: 0.5; } /* 禁用的输入框透明度设为0.5 */

8. 组合选择器

组合多个选择器
可以通过逗号分隔多个选择器，同时应用样式。
```
h1, h2, h3 { color: red; } /* 所有 h1、h2、h3 元素颜色为红色 */
```

9. 优先级与覆盖

特定选择符
使用 !important 提高样式的优先级。

.error { color: red !important; } /* 强制应用红色 */

内联样式
直接在 HTML 元素中定义的样式具有最高优先级。

10. 响应式设计

媒体查询
根据设备特性应用不同的样式。

@media screen and (max-width: 600px) {
  nav { display: none; }
} /* 屏幕宽度小于等于600像素时隐藏导航 */

11. CSS 模块化

导入规则
使用 @import 导入其他样式表，但需注意顺序和性能。
```
@import url('normalize.css'); /* 导入 normalize.css 文件 */
```

12. 常用技巧

重置默认样式
通过引入 reset.css 或自定义规则清除浏览器默认样式。

* { margin: 0; padding: 0; box-sizing: border-box; } /* 设置所有元素的边距和盒子模型 */

使用变量
CSS 变量（Custom Properties）提高代码复用性。

:root {
  --primary-color: #3498db;
}
body { color: var(--primary-color); } /* 使用变量定义主色调 */

13. 性能优化

减少计算
避免复杂的计算，尽可能使用预设值或固定单位。
```
width: 50%; /* 避免写成 calc(100% / 2) */
```
避免过度布局
确保 CSS 布局结构合理，减少重排和重绘。

14. 兼容性

使用前缀
为确保旧浏览器支持新特性，添加相应的厂商前缀。

.box {
  display: flex;
  display: -webkit-flex; /* Chrome 早期版本 */
}

测试与调试
使用浏览器的开发者工具检查样式应用情况，并进行必要的调整。

15. 工具与资源

预处理器
如 Sass、Less 等，提供变量、嵌套等高级功能。
```
$primary-color: #3498db;
.header { color: $primary-color; }
```
构建工具
使用Webpack、Gulp等自动化处理 CSS 文件。
UI 框架
Bootstrap、Foundation 等提供现成的组件和布局，加速开发进程。

16. 最佳实践