CSS 与 CSS 选择器详解

CSS 基本概念

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档呈现方式的样式语言。它允许开发者控制网页的布局、颜色、字体、间距等视觉元素，实现内容与表现的分离。

CSS 选择器

CSS选择器是CSS规则的一部分，用于指定哪些HTML元素应该应用样式规则。选择器的主要作用是定位DOM中的元素。

选择器分类

1. 基础选择器

   • 元素选择器
   • ID选择器
   • 类选择器
   • 通用选择器
   • 属性选择器

2. 组合选择器

   • 后代选择器
   • 子元素选择器
   • 相邻兄弟选择器
   • 通用兄弟选择器

3. 伪类选择器

   • 状态伪类
   • 结构伪类
   • 目标伪类
   • 否定伪类

4. 伪元素选择器

   • ::before
   • ::after
   • ::first-line
   • ::first-letter

详细说明

1. 基础选择器

• 元素选择器：直接使用HTML标签名称

  p {
    color: blue;
  }

• ID选择器：使用#符号后跟ID名

  #header {
    background: gray;
  }

• 类选择器：使用.符号后跟类名

  .container {
    width: 100%;
  }

• 通用选择器：使用*匹配所有元素

  * {
    margin: 0;
    padding: 0;
  }

• 属性选择器：根据元素的属性及属性值选择

  [type='text'] {
    border: 1px solid #ccc;
  }

2. 组合选择器

• 后代选择器：使用空格分隔，选择所有后代元素

  div p {
    font-size: 14px;
  }

• 子元素选择器：使用>符号，仅选择直接子元素

  ul > li {
    list-style: none;
  }

• 相邻兄弟选择器：使用+符号，选择紧随其后的兄弟元素

  h1 + p {
    color: red;
  }

• 通用兄弟选择器：使用~符号，选择所有后续兄弟元素

  h1 ~ p {
    margin-top: 10px;
  }

3. 伪类选择器

• 状态伪类：

  a:hover {
    color: red;
  }
  input:focus {
    border-color: blue;
  }

• 结构伪类：

  li:first-child {
    font-weight: bold;
  }
  p:nth-child(2) {
    color: green;
  }

• 目标伪类：

  :target {
    background: yellow;
  }

• 否定伪类：

  p:not(.special) {
    color: gray;
  }

4. 伪元素选择器

p::first-line {
  font-weight: bold;
}

div::before {
  content: 'Before content';
}

div::after {
  content: 'After content';
}

选择器优先级

CSS选择器的优先级决定了当多个选择器应用于同一元素时，哪个样式规则会被应用。优先级从高到低为：

1. 内联样式（style属性）
2. ID选择器
3. 类选择器、属性选择器、伪类
4. 元素选择器、伪元素
5. 通用选择器

当优先级相同时，后定义的规则会覆盖先定义的规则（层叠性）。

实际应用技巧

1. 选择器的特异性：尽量使用低特异性的选择器，提高CSS的可维护性
2. 组合使用：合理组合不同类型的选择器，精确定位元素
3. 避免过度嵌套：深层嵌套会降低性能，增加维护难度
4. 使用BEM命名规范：Block, Element, Modifier命名方法，提高代码可读性
5. CSS变量：使用CSS变量管理重复值，便于维护

示例代码

/* 基础选择器 */
body {
  font-family: Arial, sans-serif;
}

#main-content {
  width: 960px;
  margin: 0 auto;
}

.card {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

/* 组合选择器 */
.card > h3 {
  color: #333;
  margin-top: 0;
}

.card p {
  line-height: 1.5;
}

/* 伪类选择器 */
.card:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card:nth-child(even) {
  background: #f9f9f9;
}

/* 伪元素选择器 */
.card::before {
  content: 'Card: ';
  font-weight: bold;
}

通过合理使用CSS选择器，可以精确控制页面元素的样式，实现丰富的视觉效果，同时保持代码的清晰和可维护性。