【CSS系统化学习】- CSS选择器

2. CSS选择器

以下是CSS中常用的选择器及其示例：

元素选择器

• 作用：通过HTML标签名选择元素。

• 语法：

  p { 
    font-size: 16px; 
  }

• 示例：选中所有<p>标签并设置字体大小。

类选择器

• 作用：通过类名（class）选择元素。

• 语法：

  .warning {
    color: #ff0000;
    border: 1px solid red;
  }

• 示例：选中所有class="warning"的元素并设置红色文本和边框。
• 注意：一个元素可以有多个类（如class="button primary"）。

ID选择器

• 作用：通过唯一ID（id）选择元素。

• 语法：

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

• 示例：选中id="header"的元素并设置背景颜色。
• 注意：ID在页面中应是唯一的。

属性选择器

• 作用：根据元素的属性或属性值选择元素。

• 语法：

  /* 选中包含title属性的元素 */
  [title] { 
    cursor: help; 
  }
  
  /* 选中type="text"的输入框 */
  input[type="text"] { 
    border: 1px solid #ccc; 
  }

• 示例：为所有带有title属性的元素添加帮助光标。

伪类选择器

• 作用：选择元素的特定状态（如悬停、聚焦等）。

• 语法：

  /* 悬停状态 */
  a:hover { 
    text-decoration: underline; 
  }
  
  /* 第一个子元素 */
  li:first-child { 
    font-weight: bold; 
  }
  
  /* 无效的输入框 */
  input:invalid { 
    border-color: red; 
  }

• 常见伪类：:hover, :active, :focus, :nth-child(n), :not(selector)。

伪元素选择器

• 作用：为元素的特定部分添加样式（如首行、首字母等）。

• 语法：

  /* 段落的首字母 */
  p::first-letter { 
    font-size: 24px; 
  }
  
  /* 元素内容前插入内容 */
  .note::before { 
    content: "⚠️ "; 
  }
  
  /* 选中被用户选中的文本 */
  ::selection { 
    background: yellow; 
  }

• 常见伪元素：::before, ::after, ::first-line, ::placeholder。
• 注意：伪元素使用双冒号（::），伪类用单冒号（:）。

组合使用示例

/* 类选择器 + 伪类 */
.button:hover {
  opacity: 0.8;
}

/* 后代选择器 */
nav ul li { 
  list-style: none; 
}

/* 子选择器 */
.container > .item { 
  margin: 10px; 
}

总结
CSS选择器是控制样式作用范围的核心工具，合理使用可大幅提升代码复用性和维护性。