选择器是 CSS 的基础，它们能精准地选中想要的 HTML 元素并为其应用样式。以下是各种选择器的详细说明和示例。

简单选择器

1. ID 选择器

使用 # 符号选择特定 ID 的元素。

#header {
  background-color: blue;
}
<div id="header">这个元素会被选中</div>

2. 元素选择器

直接使用 HTML 标签名称选择所有该类型的元素。

p {
  font-size: 16px;
}
<p>所有段落都会应用这个样式</p>
<p>这个段落也会</p>

3. 类选择器

使用 . 符号选择特定类的元素。

.highlight {
  background-color: yellow;
}
<div class="highlight">这个元素会被选中</div>
<p class="highlight">这个也会被选中</p>

4. 通配符选择器

使用 * 选择所有元素。

* {
  margin: 0;
  padding: 0;
}
<!-- 页面上的所有元素都会被选中 -->
<div>边距和内边距都为0</div>
<p>边距和内边距也都为0</p>

5. 属性选择器

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

/* 选择所有具有 href 属性的元素 */
[href] {
  color: blue;
}

/* 选择 href 属性值为 "https://example.com" 的元素 */
[href="https://example.com"] {
  font-weight: bold;
}

/* 选择 href 属性值以 "https" 开头的元素 */
[href^="https"] {
  text-decoration: underline;
}

/* 选择 href 属性值包含 "example" 的元素 */
[href*="example"] {
  font-style: italic;
}

/* 选择 href 属性值以 ".com" 结尾的元素 */
[href$=".com"] {
  border-bottom: 1px solid blue;
}
<a href="https://example.com">这个链接会应用多个样式</a>
<a href="http://other.com">这个链接只会应用部分样式</a>

6. 伪类选择器

选择元素的特定状态。最常见的用于链接的伪类遵循"爱恨法则"（LVHA: Link, Visited, Hover, Active）。

/* 未访问的链接 */
a:link {
  color: blue;
}

/* 已访问的链接 */
a:visited {
  color: purple;
}

/* 鼠标悬停状态 */
a:hover {
  color: red;
  text-decoration: underline;
}

/* 激活状态（鼠标按下） */
a:active {
  color: green;
}

其他常用伪类选择器：

/* 第一个子元素 */
li:first-child {
  font-weight: bold;
}

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

/* 奇数项 */
li:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 偶数项 */
li:nth-child(even) {
  background-color: #e6e6e6;
}

/* 表单相关 */
input:focus {
  border-color: blue;
}

input:disabled {
  background-color: #ddd;
}

input:checked {
  box-shadow: 0 0 5px green;
}

7. 伪元素选择器

用于向元素的特定部分添加样式，使用 :: 表示（旧版本中可使用单冒号）。

/* 在元素内容之前添加内容 */
.note::before {
  content: "注意：";
  font-weight: bold;
  color: red;
}

/* 在元素内容之后添加内容 */
.external-link::after {
  content: " ↗";
  font-size: 0.8em;
}

/* 选择文本的第一行 */
p::first-line {
  font-variant: small-caps;
}

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

/* 选择用户选中的文本 */
::selection {
  background-color: yellow;
  color: black;
}
<p class="note">这是一个重要提示</p>
<!-- 渲染为：注意：这是一个重要提示 -->

<a class="external-link" href="https://example.com">访问示例网站</a>
<!-- 渲染为：访问示例网站 ↗ -->

选择器的组合

1. 并且（无连接符）

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

/* 选择同时有 nav 和 primary 类的元素 */
.nav.primary {
  font-weight: bold;
}
<div class="nav primary">这个元素会被选中</div>
<div class="nav">这个不会被选中</div>

2. 后代元素选择器（空格）

选择某个元素内部的所有指定后代元素，无论层级深度。

/* 选择 nav 元素内的所有 a 元素 */
nav a {
  text-decoration: none;
}
<nav>
  <a href="#">直接子元素，会被选中</a>
  <div>
    <a href="#">间接后代，也会被选中</a>
  </div>
</nav>

3. 子元素选择器（>）

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

/* 只选择 nav 元素的直接子元素 a */
nav > a {
  font-weight: bold;
}
<nav>
  <a href="#">直接子元素，会被选中</a>
  <div>
    <a href="#">间接后代，不会被选中</a>
  </div>
</nav>

4. 相邻兄弟选择器（+）

选择紧接在某个元素后的同级元素。

/* 选择紧跟在 h2 后面的段落 */
h2 + p {
  font-weight: bold;
}
<h2>标题</h2>
<p>这个段落会被选中</p>
<p>这个段落不会被选中</p>

5. 通用兄弟选择器（~）

选择某元素之后的所有同级指定元素。

/* 选择 h2 后面的所有 p 元素 */
h2 ~ p {
  color: gray;
}
<h2>标题</h2>
<p>这个段落会被选中</p>
<div>这个不会被选中</div>
<p>这个段落也会被选中</p>

选择器的并列

多个不同的选择器可以用逗号分隔，表示应用相同的样式规则。这是一种语法糖，避免重复编写相同的样式。

/* 以下选择器会应用相同的样式规则 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Arial', sans-serif;
  margin-top: 1em;
}

/* 可以组合不同类型的选择器 */
.error, p.warning, #message {
  color: red;
  border: 1px solid red;
  padding: 10px;
}
<h1>这个标题会应用字体样式</h1>
<h2>这个也会</h2>

<div class="error">错误信息</div>
<p class="warning">警告信息</p>
<div id="message">重要消息</div>
<!-- 以上三个元素都会有红色文本、红色边框和内边距 -->

选择器优先级

当多个规则应用于同一元素时，遵循以下优先级（从高到低）：

  1. !important 声明
  2. 内联样式（style 属性）
  3. ID 选择器（如 #header）
  4. 类选择器、属性选择器和伪类（如 .highlight, [type="text"], :hover）
  5. 元素选择器和伪元素（如 p, ::before）
  6. 通用选择器（*）

选择器越具体，优先级越高。如果优先级相同，则后声明的规则会覆盖先声明的规则。

高级示例

表单样式

/* 所有输入框基本样式 */
input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 文本输入框 */
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  margin-bottom: 10px;
}

/* 聚焦状态 */
input:focus {
  outline: none;
  border-color: #4A90E2;
  box-shadow: 0 0 3px rgba(74, 144, 226, 0.5);
}

/* 禁用状态 */
input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* 复选框旁的标签 */
input[type="checkbox"] + label {
  margin-left: 5px;
  font-size: 14px;
}

响应式导航栏

.nav {
  background-color: #333;
}

/* 主导航链接 */
.nav > a {
  color: white;
  padding: 15px 20px;
  display: inline-block;
  text-decoration: none;
}

/* 悬停状态 */
.nav > a:hover {
  background-color: #555;
}

/* 当前活动页面 */
.nav > a.active {
  background-color: #4A90E2;
}

/* 下拉菜单容器 */
.nav .dropdown {
  position: relative;
  display: inline-block;
}

/* 下拉内容 */
.nav .dropdown .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* 显示下拉菜单 */
.nav .dropdown:hover .dropdown-content {
  display: block;
}

/* 下拉菜单链接 */
.nav .dropdown .dropdown-content a {
  color: black;
  padding: 12px 16px;
  display: block;
  text-decoration: none;
}

/* 下拉菜单链接悬停 */
.nav .dropdown .dropdown-content a:hover {
  background-color: #ddd;
}
最后修改：2025 年 04 月 15 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏