✨ CSS 选择器 👌

1. 选择器概述

选择器：帮助你精准地选中想要的元素，是 CSS 的核心概念之一。

选择器的作用是告诉浏览器哪些 HTML 元素需要应用特定的样式规则。掌握选择器是学习 CSS 的基础，也是提高开发效率的关键。

2. 简单选择器

2.1 元素选择器（标签选择器）

通过 HTML 标签名选择元素。

css

/* 选择所有 p 元素 */
p {
  color: #333;
  line-height: 1.6;
}

/* 选择所有 div 元素 */
div {
  margin: 10px;
  padding: 15px;
}

2.2 类选择器

通过 class 属性选择元素，以 . 开头。

css

/* 选择 class="container" 的元素 */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 选择 class="btn" 的元素 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

/* 选择 class="text-center" 的元素 */
.text-center {
  text-align: center;
}

HTML 示例：

html

<div class="container">
  <button class="btn">点击按钮</button>
  <p class="text-center">居中文本</p>
</div>

2.3 ID 选择器

通过 id 属性选择元素，以 # 开头。

css

/* 选择 id="header" 的元素 */
#header {
  background-color: #f8f9fa;
  height: 80px;
}

/* 选择 id="main-content" 的元素 */
#main-content {
  min-height: 500px;
  padding: 20px;
}

/* 选择 id="footer" 的元素 */
#footer {
  background-color: #333;
  color: white;
  text-align: center;
}

HTML 示例：

html

<header id="header">网站头部</header>
<main id="main-content">主要内容</main>
<footer id="footer">网站底部</footer>

::: important

重要：ID 在页面中应该是唯一的，一个 ID 只能对应一个元素。

:::

2.4 通配符选择器

使用 * 选择所有元素。

css

/* 选择所有元素 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 选择 .container 内的所有元素 */
.container * {
  font-family: Arial, sans-serif;
}

WARNING

注意：通配符选择器会影响性能，应谨慎使用。

2.5 属性选择器

根据元素的属性名和属性值选择元素。

基本语法

选择器	说明	示例
`[attr]`	选择具有指定属性的元素	`[title]`
`[attr=value]`	选择属性值等于指定值的元素	`[type="text"]`
`[attr^=value]`	选择属性值以指定值开头的元素	`[href^="https"]`
`[attr$=value]`	选择属性值以指定值结尾的元素	`[src$=".jpg"]`
`[attr*=value]`	选择属性值包含指定值的元素	`[class*="btn"]`
`[attr~=value]`	选择属性值包含指定单词的元素	`[class~="active"]`

实际应用

css

/* 选择所有有 title 属性的元素 */
[title] {
  cursor: help;
  border-bottom: 1px dotted #999;
}

/* 选择所有 type="text" 的 input 元素 */
input[type="text"] {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
}

/* 选择所有 href 以 "https" 开头的链接 */
a[href^="https"] {
  color: #28a745;
}

/* 选择所有 src 以 ".jpg" 结尾的图片 */
img[src$=".jpg"] {
  border: 2px solid #007bff;
}

/* 选择所有 class 包含 "btn" 的元素 */
[class*="btn"] {
  display: inline-block;
  text-decoration: none;
}

3. 伪类选择器

伪类选择器用于选择元素的特定状态。

3.1 链接伪类

用于设置链接的不同状态样式。

css

/* 未访问的链接 */
a:link {
  color: #007bff;
  text-decoration: none;
}

/* 已访问的链接 */
a:visited {
  color: #6c757d;
}

/* 鼠标悬停时的链接 */
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* 激活状态的链接（鼠标按下时） */
a:active {
  color: #004085;
}

TIP

爱恨法则（LVHA）：:link → :visited → :hover → :active

3.2 结构伪类

根据元素在文档中的位置选择元素。

css

/* 选择第一个子元素 */
li:first-child {
  font-weight: bold;
  color: #007bff;
}

/* 选择最后一个子元素 */
li:last-child {
  border-bottom: none;
}

/* 选择第 n 个子元素 */
li:nth-child(2) {
  background-color: #f8f9fa;
}

/* 选择奇数位置的子元素 */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 选择偶数位置的子元素 */
tr:nth-child(even) {
  background-color: #ffffff;
}

/* 选择前 3 个子元素 */
li:nth-child(-n + 3) {
  color: #dc3545;
}

3.3 表单伪类

用于选择表单元素的特定状态。

css

/* 获得焦点的输入框 */
input:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  outline: none;
}

/* 禁用状态的元素 */
input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

/* 选中状态的复选框和单选框 */
input:checked {
  accent-color: #007bff;
}

/* 必填字段 */
input:required {
  border-left: 3px solid #dc3545;
}

/* 可选字段 */
input:optional {
  border-left: 3px solid #28a745;
}

3.4 其他常用伪类

css

/* 鼠标悬停 */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 非指定元素 */
input:not([type="submit"]) {
  margin-bottom: 10px;
}

/* 根元素 */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

4. 伪元素选择器

伪元素选择器用于选择元素的特定部分或创建虚拟元素。

4.1 ::before 和 ::after

在元素内容前后插入内容。

css

/* 在元素前插入内容 */
.quote::before {
  content: " “";
  font-size: 2em;
  color: #007bff;
  vertical-align: top;
}

/* 在元素后插入内容 */
.quote::after {
  content: " ”";
  font-size: 2em;
  color: #007bff;
  vertical-align: bottom;
}

/* 创建装饰性元素 */
.btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("icon.png") no-repeat;
  margin-right: 8px;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

4.2 其他伪元素

css

/* 选择第一行 */
p::first-line {
  font-weight: bold;
  color: #007bff;
}

/* 选择第一个字母 */
p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 5px;
  color: #dc3545;
}

/* 选中的文本 */
::selection {
  background-color: #007bff;
  color: white;
}

/* 输入框占位符 */
input::placeholder {
  color: #6c757d;
  font-style: italic;
}

5. 选择器组合

5.1 后代选择器（空格）

选择指定元素内部的所有后代元素。

css

/* 选择 .container 内的所有 p 元素 */
.container p {
  margin-bottom: 15px;
  line-height: 1.6;
}

/* 选择 nav 内的所有 a 元素 */
nav a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
}

/* 多层嵌套 */
.sidebar .menu li a {
  display: block;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

5.2 子选择器（>）

只选择直接子元素，不包括更深层的后代。

css

/* 只选择 .menu 的直接子元素 li */
.menu > li {
  display: inline-block;
  margin-right: 20px;
}

/* 只选择 .card 的直接子元素 .header */
.card > .header {
  background-color: #f8f9fa;
  padding: 15px;
  border-bottom: 1px solid #dee2e6;
}

对比示例：

html

<ul class="menu">
  <li>一级菜单 1</li>
  <!-- 会被 .menu > li 选中 -->
  <li>
    一级菜单 2
    <ul>
      <li>二级菜单</li>
      <!-- 不会被 .menu > li 选中 -->
    </ul>
  </li>
</ul>

5.3 相邻兄弟选择器（+）

选择紧跟在指定元素后面的兄弟元素。

css

/* 选择紧跟在 h2 后面的 p 元素 */
h2 + p {
  margin-top: 0;
  font-weight: bold;
  color: #007bff;
}

/* 选择紧跟在 .checkbox 后面的 label */
.checkbox + label {
  margin-left: 8px;
  cursor: pointer;
}

5.4 通用兄弟选择器（~）

选择指定元素后面的所有兄弟元素。

css

/* 选择 h2 后面的所有 p 元素 */
h2 ~ p {
  color: #6c757d;
  font-size: 0.9em;
}

/* 选择 .active 后面的所有 .item */
.active ~ .item {
  opacity: 0.6;
}

5.5 并且选择器（无空格）

同时满足多个条件的元素。

css

/* 同时具有 .btn 和 .primary 类的元素 */
.btn.primary {
  background-color: #007bff;
  color: white;
}

/* id 为 header 且 class 为 fixed 的元素 */
#header.fixed {
  position: fixed;
  top: 0;
  z-index: 1000;
}

/* input 元素且 type 为 text */
input[type="text"] {
  border: 1px solid #ddd;
}

6. 选择器并列

使用逗号分隔多个选择器，为它们应用相同的样式。

css

/* 为多个标题元素应用相同样式 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Arial", sans-serif;
  font-weight: bold;
  margin-bottom: 15px;
}

/* 为多个表单元素应用相同样式 */
input,
textarea,
select {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
}

/* 为多个按钮类应用相同样式 */
.btn-primary,
.btn-secondary,
.btn-success {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

7. 最佳实践建议

7.1 选择器性能

避免过度嵌套：选择器层级不要超过 3-4 层
优先使用类选择器：比 ID 选择器更灵活，比元素选择器更高效
谨慎使用通配符：* 选择器会影响性能
避免使用后代选择器选择深层元素：使用更具体的类名

css

/* 不推荐：层级过深 */
.header .nav .menu .item .link {
}

/* 推荐：使用具体的类名 */
.nav-link {
}

7.2 命名规范

使用有意义的类名：描述元素的功能而不是外观
采用一致的命名约定：如 BEM、OOCSS 等
避免使用 ID 选择器做样式：保留 ID 用于 JavaScript

css

/* 不推荐：描述外观 */
.red-button {
}
.big-text {
}

/* 推荐：描述功能 */
.btn-danger {
}
.title-primary {
}

7.3 代码组织

按功能分组：将相关的选择器放在一起
使用注释：为复杂的选择器添加说明
保持一致的缩进：提高代码可读性

css

/* 导航组件 */

.navbar {
}
.navbar ul {
}
.navbar li {
}
.navbar a {
}

/* 按钮组件 */

.btn {
}
.btn-primary {
}
.btn-secondary {
}

✨ CSS 选择器 👌 ​

1. 选择器概述 ​

2. 简单选择器 ​

2.1 元素选择器（标签选择器） ​

2.2 类选择器 ​

2.3 ID 选择器 ​

2.4 通配符选择器 ​

2.5 属性选择器 ​

基本语法 ​

实际应用 ​

3. 伪类选择器 ​

3.1 链接伪类 ​

3.2 结构伪类 ​

3.3 表单伪类 ​

3.4 其他常用伪类 ​

4. 伪元素选择器 ​

4.1 ::before 和 ::after ​

4.2 其他伪元素 ​

5. 选择器组合 ​

5.1 后代选择器（空格） ​

5.2 子选择器（>） ​

5.3 相邻兄弟选择器（+） ​

5.4 通用兄弟选择器（~） ​

5.5 并且选择器（无空格） ​

6. 选择器并列 ​

7. 最佳实践建议 ​

7.1 选择器性能 ​

7.2 命名规范 ​

7.3 代码组织 ​

✨ CSS 选择器 👌

1. 选择器概述

2. 简单选择器

2.1 元素选择器（标签选择器）

2.2 类选择器

2.3 ID 选择器

2.4 通配符选择器

2.5 属性选择器

基本语法

实际应用

3. 伪类选择器

3.1 链接伪类

3.2 结构伪类

3.3 表单伪类

3.4 其他常用伪类

4. 伪元素选择器

4.1 ::before 和 ::after

4.2 其他伪元素

5. 选择器组合

5.1 后代选择器（空格）

5.2 子选择器（>）

5.3 相邻兄弟选择器（+）

5.4 通用兄弟选择器（~）

5.5 并且选择器（无空格）

6. 选择器并列

7. 最佳实践建议

7.1 选择器性能

7.2 命名规范

7.3 代码组织