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. 最佳实践
-
代码规范
保持代码整洁，适当分隔功能模块，添加注释方便维护。 -
版本控制
使用 Git 等工具管理 CSS 文件变更，便于协作与回溯。
通过以上内容的学习和实践，可以系统地掌握 CSS 的核心概念、高级技巧以及最佳实践，从而在实际项目中开发出高效、优雅且兼容性良好的网页样式。
