Ceryn

CSS 选择器

11分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS 选择器参考手册

CSS 选择器 | MDN

引入

CSS 选择器用于选中页面中的特定元素，然后给这些元素添加样式。

没有选择器，CSS 就无法知道要把样式应用到哪些元素上。选择器是连接 HTML 和 CSS 的桥梁。

定义

定义

CSS 选择器是一种模式匹配规则，用于选中 HTML 文档中符合条件的元素，然后对这些元素应用样式。

选择器写在样式规则的最前面，告诉浏览器：“我要给哪些元素添加样式”。

语法

选择器 {
  属性: 属性值;
}

例如：

p {
  color: blue;
}

这条规则表示：选中所有 <p> 元素，让它们的文字颜色变成蓝色。

选择器类型

基础选择器

通配选择器 *

选中页面中的所有元素。

* {
  margin: 0;
  padding: 0;
}

常用于重置浏览器默认样式。

元素选择器

选中指定类型的所有元素。

<h1>标题</h1>
<p>段落内容</p>
<p>另一段内容</p>
h1 {
  color: red;
}
 
p {
  font-size: 16px;
}

这会让所有 <h1> 变成红色，所有 <p> 的字体大小变成 16px。

类选择器 .classname

选中带有指定 class 属性的元素。

<p class="intro">这是介绍段落</p>
<p class="intro">这也是介绍段落</p>
<p>普通段落</p>
.intro {
  color: green;
  font-weight: bold;
}

只有带 class="intro" 的元素会变成绿色加粗。

特点：

  • 以 . 开头
  • 可以重复使用
  • 一个元素可以有多个 class，用空格分隔：class="intro highlight"

ID 选择器 #idname

选中带有指定 id 属性的元素。

<div id="header">页面头部</div>
<div id="content">页面内容</div>
#header {
  background-color: #333;
  color: white;
}
 
#content {
  padding: 20px;
}

特点：

  • 以 # 开头
  • 一个页面中同一个 id 应该只出现一次
  • 优先级比类选择器高
  • 通常用于页面中唯一的元素

属性选择器

根据元素的属性和属性值选中元素。

选择器说明示例
[attr]选中带有指定属性的元素[disabled] 选中所有带 disabled 属性的元素
[attr=value]选中属性值完全匹配的元素[type="text"] 选中 type 为 text 的元素
[attr^=value]选中属性值以指定值开头的元素[href^="https"] 选中链接以 https 开头的元素
[attr$=value]选中属性值以指定值结尾的元素[src$=".jpg"] 选中图片后缀为 .jpg 的元素
[attr*=value]选中属性值包含指定值的元素[class*="btn"] 选中 class 中包含 btn 的元素

示例：表单输入框样式

<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit" value="提交">
/* 选中所有文本输入框 */
[type="text"] {
  border: 1px solid #ccc;
}
 
/* 选中所有密码输入框 */
[type="password"] {
  border: 1px solid orange;
}

示例：外部链接样式

/* 选中所有以 https 开头的链接 */
a[href^="https"] {
  color: green;
}
 
/* 选中所有 PDF 链接 */
a[href$=".pdf"] {
  color: red;
}

组合选择器

通过元素之间的关系选中元素。

后代选择器 A B

选中 A 元素内部的所有 B 元素（不管嵌套多深）。

<div class="container">
  <p>段落1</p>
  <div>
    <p>段落2</p>
  </div>
</div>
.container p {
  color: blue;
}

这会让 .container 内部的所有 <p> 都变成蓝色，包括嵌套在其他元素中的。

子代选择器 A > B

选中 A 元素的直接子元素 B。

<div class="parent">
  <p>直接子元素</p>
  <div>
    <p>孙子元素</p>
  </div>
</div>
.parent > p {
  color: red;
}

只有”直接子元素”会变成红色，“孙子元素”不会。

相邻兄弟选择器 A + B

选中紧跟在 A 后面的第一个 B 元素（同一层级）。

<h2>标题</h2>
<p>第一段</p>
<p>第二段</p>
h2 + p {
  font-weight: bold;
}

只有紧跟在 <h2> 后面的第一个 <p>（“第一段”）会加粗。

通用兄弟选择器 A ~ B

选中 A 后面的所有同级 B 元素。

<h2>标题</h2>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
h2 ~ p {
  color: gray;
}

<h2> 后面的所有 <p> 都会变成灰色。

伪类选择器

用于选中元素的特定状态或位置。

常见伪类：

  • :hover - 鼠标悬停时
  • :active - 鼠标点击时
  • :focus - 输入框获得焦点时
  • :first-child - 作为第一个子元素时
  • :last-child - 作为最后一个子元素时
  • :nth-child(n) - 作为第 n 个子元素时
/* 鼠标移到链接上时变红 */
a:hover {
  color: red;
}
 
/* 选中列表的第一项 */
li:first-child {
  font-weight: bold;
}

伪类的详细内容可以参考 CSS 伪类。

伪元素选择器

用于选中元素的特定部分或在元素前后插入内容。

常见伪元素：

  • ::before - 在元素内容前插入内容
  • ::after - 在元素内容后插入内容
  • ::first-line - 选中第一行文字
  • ::first-letter - 选中第一个字母
/* 在每个段落前面添加引号 */
p::before {
  content: """;
  color: gray;
}
 
/* 在每个段落后面添加引号 */
p::after {
  content: """;
  color: gray;
}

伪元素的详细内容可以参考 CSS 伪元素。

多个选择器组合

群组选择器 ,

同时选中多个不同的选择器，用逗号分隔。

h1, h2, h3 {
  color: navy;
  font-family: Arial;
}

这会让 <h1>、<h2>、<h3> 都应用相同的样式。

链式选择器

选择器可以连着写，表示同时满足多个条件。

<p class="intro highlight">重点介绍</p>
<p class="intro">普通介绍</p>
/* 选中同时有 intro 和 highlight 类的元素 */
p.intro.highlight {
  background-color: yellow;
  font-weight: bold;
}

只有同时带 intro 和 highlight 的 <p> 才会变成黄色背景加粗。

特点

  • 选择器用于匹配 HTML 元素，声明块用于定义样式
  • 选择器区分大小写（在 HTML 中通常用小写）
  • 可以组合使用多个选择器，实现更精确的选中
  • 不同选择器有不同的优先级，会影响最终应用的样式
  • 选择器写得越具体，优先级通常越高
  • 合理使用选择器可以减少 HTML 中的 class 和 id 数量

常见使用场景

重置默认样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

导航菜单样式

<nav class="menu">
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>
.menu a {
  color: #333;
  text-decoration: none;
  padding: 10px 15px;
}
 
.menu a:hover {
  background-color: #f0f0f0;
}

表单元素样式

/* 所有输入框 */
input[type="text"],
input[type="email"],
input[type="password"] {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
}
 
/* 输入框获得焦点时 */
input:focus {
  border-color: blue;
  outline: none;
}

列表项样式

/* 第一个列表项 */
li:first-child {
  font-weight: bold;
}
 
/* 奇数行背景色 */
li:nth-child(odd) {
  background-color: #f9f9f9;
}

选择器优先级

当多个选择器同时作用于一个元素时，浏览器会根据优先级规则决定最终应用哪个样式。

优先级从高到低：

  1. 内联样式（style 属性）
  2. ID 选择器 #id
  3. 类选择器 .class、属性选择器 [attr]、伪类 :hover
  4. 元素选择器 p、伪元素 ::before
  5. 通配选择器 *

详细内容可以参考 CSS 优先级 和 CSS 层叠。

理解

可以把 CSS 选择器理解为”地址系统”。

HTML 是一座城市，里面有各种建筑（元素）。CSS 选择器就是用来描述”我要给哪些建筑刷漆”的地址规则：

  • p - 所有段落建筑
  • .intro - 所有带”介绍”标签的建筑
  • #header - 那个唯一的”头部”建筑
  • .container p - 在”容器”建筑内部的所有段落建筑
  • a:hover - 当鼠标悬停在链接建筑上时

选择器写得越精确，就越能准确找到要修改的元素，而不会影响到其他元素。

引出

理解了选择器的基础用法后，可以继续学习：

掌握选择器后，就可以更灵活地控制页面元素的样式，而不需要给每个元素都添加 class 或 id。

关系图谱

反向链接