CSS 选择器介绍

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 的核心概念、高级技巧以及最佳实践，从而在实际项目中开发出高效、优雅且兼容性良好的网页样式。