CSS选择器基础详解

进击的野人
112 阅读8分钟

CSS选择器是前端开发中至关重要的概念，它决定了我们如何精确地选取HTML元素并为其应用样式。本文将系统地介绍CSS选择器的各种类型及其使用方法，帮助读者建立完整的选择器知识体系。

一、基础选择器

基础选择器是CSS中最基本、最常用的选择器类型，包括标签选择器、类选择器、ID选择器和通配符选择器。

1. 标签选择器

标签选择器通过HTML标签名称来选取元素，它会选中页面中所有该类型的标签。

css

复制下载

p {
  color: red;
}

上述代码会将所有<p>标签的文本颜色设置为红色。标签选择器非常适合用于设置页面中某一类元素的通用样式。

2. 类选择器

类选择器通过元素的class属性来选取元素，以点号(.)开头。

css

复制下载

.class {
  color: red;
}

在HTML中，可以给多个元素设置相同的class属性，因此类选择器可以实现样式的复用。一个元素也可以拥有多个class，用空格分隔，这样可以组合多个样式。

3. ID选择器

ID选择器通过元素的id属性来选取元素，以井号(#)开头。

css

复制下载

#id {
  color: red;
}

ID选择器具有较高的特异性，且一个ID在页面中应该是唯一的，因此ID选择器通常用于选取特定的单个元素。

4. 通配符选择器

通配符选择器使用星号(*)表示，它会匹配页面中的所有元素。

css

复制下载

* {
  color: red;
}

通配符选择器常用于重置浏览器的默认样式，或者设置全局的盒模型、字体等基础样式。

二、关系选择器

关系选择器根据元素在文档结构中的位置关系来选取元素，包括后代选择器、子代选择器和兄弟选择器。

1. 后代选择器

后代选择器通过空格连接两个选择器，选取第一个选择器匹配元素的所有后代元素中匹配第二个选择器的元素。

css

复制下载

p span {
  color: red;
}

上述代码会选中所有在<p>元素内的<span>元素，无论它们嵌套了多少层。

2. 子代选择器

子代选择器使用大于号(>)连接两个选择器，只选取第一个选择器匹配元素的直接子元素中匹配第二个选择器的元素。

css

复制下载

p > span {
  color: red;
}

与后代选择器不同，子代选择器只选择"亲儿子"元素，不会选择更深层嵌套的元素。

3. 兄弟选择器

兄弟选择器用于选取与某个元素具有相同父元素的兄弟元素。

邻接兄弟选择器

邻接兄弟选择器使用加号(+)连接两个选择器，选取紧接在第一个选择器匹配元素之后的第一个兄弟元素。

css

复制下载

p + span {
  color: red;
}

上述代码会选中紧跟在<p>元素后的第一个<span>兄弟元素。

通用兄弟选择器

通用兄弟选择器使用波浪号(~)连接两个选择器，选取第一个选择器匹配元素之后的所有兄弟元素。

css

复制下载

p ~ span {
  color: red;
}

上述代码会选中所有在<p>元素后的<span>兄弟元素。

三、分组选择器

分组选择器可以将多个选择器组合在一起，为它们应用相同的样式规则，用逗号分隔各个选择器。

css

复制下载

p, span {
  color: red;
}

上述代码会将所有<p>和<span>元素的文本颜色设置为红色。分组选择器可以有效地减少代码重复，提高CSS代码的可维护性。

四、伪类选择器

伪类选择器用于选取元素的特定状态或结构位置，以冒号(:)开头。

1. 链接伪类

链接伪类专门用于设置链接在不同状态下的样式。

css

复制下载

/* 未访问链接 */
a:link {
  color: brown;
  text-decoration: none;
}

/* 鼠标悬停链接 */
a:hover {
  color: aquamarine;
  text-decoration: underline;
}

/* 被访问的链接 */
a:visited {
  color: pink;
  text-decoration: underline;
}

除了上述三种状态，链接还有激活状态(:active)，表示链接被点击时的状态。

2. 状态伪类选择器

状态伪类选择器根据元素的交互状态来选取元素。

css

复制下载

.box:hover {
  background-color: orange;
}

.search:focus {
  background-color: aquamarine;
  width: 200px;
}

常见的状态伪类包括：

  • :hover - 鼠标悬停在元素上时的状态
  • :focus - 元素获得焦点时的状态（如表单元素）
  • :active - 元素被激活时的状态

3. 结构伪类选择器

结构伪类选择器根据元素在文档树中的位置来选取元素。

css

复制下载

.ul1 li:first-child {
  color: red;
}

.ul1 li:last-child {
  color: pink;
}

.ul1 li:nth-child(2n) {
  color: aquamarine;
}

常用的结构伪类包括：

  • :first-child - 选取属于其父元素的第一个子元素
  • :last-child - 选取属于其父元素的最后一个子元素
  • :nth-child(n) - 选取属于其父元素的第n个子元素
  • :nth-last-child(n) - 从最后一个子元素开始计数
  • :only-child - 选取属于其父元素的唯一子元素

4. 表单伪类选择器

表单伪类选择器专门用于选取表单元素的不同状态。

css

复制下载

/* 表单禁用伪类选择器 */
button:disabled {
  opacity: .4;
}

input:checked + label {
  color: blueviolet;
}

常见的表单伪类包括：

  • :checked - 选取所有被选中的表单元素（单选按钮或复选框）
  • :disabled - 选取所有被禁用的表单元素
  • :enabled - 选取所有启用的表单元素
  • :required - 选取所有必填的表单元素
  • :optional - 选取所有可选的表单元素
  • :valid - 选取所有通过验证的表单元素
  • :invalid - 选取所有未通过验证的表单元素

五、伪元素选择器

伪元素选择器用于选取元素的特定部分，而不是元素本身，以双冒号(::)开头。

css

复制下载

/* 选择首行 */
p::first-line {
  color: red;
}

/* 选择首字母 */
p::first-letter {
  color: aqua;
}

/* 选择占位符 */
textarea::placeholder {
  color: rgb(0, 173, 242);
  font-size: 14px;
}

/* before和after伪元素 */
div::before {
  content: '之前';
  color: red;
}

div::after {
  content: '之后';
  color: rgb(0, 255, 208);
}

常用的伪元素包括：

  • ::before - 在元素内容之前插入内容
  • ::after - 在元素内容之后插入内容
  • ::first-line - 选取元素的第一行
  • ::first-letter - 选取元素的第一个字母
  • ::selection - 选取用户选中的内容
  • ::placeholder - 选取表单元素的占位符文本

需要注意的是，::before和::after伪元素必须与content属性一起使用，即使内容为空（content: ''）。

六、属性选择器

属性选择器根据元素的属性及属性值来选取元素。

css

复制下载

/* 匹配包含指定属性的元素 */
a[class] {
  color: rgb(203, 254, 0);
}

/* 匹配属性值等于指定值的元素 */
a[class="font"] {
  color: red;
}

/* 匹配属性值以指定字符串开头的元素 */
a[class^="font"] {
  color: #0000ff;
}

/* 匹配属性值以指定字符串结尾的元素 */
a[class$="16"] {
  color: green;
}

/* 匹配属性值包含指定字符串的元素 */
a[class*="14"] {
  color: orange;
}

属性选择器的类型包括：

  • [attr] - 选取带有指定属性的元素
  • [attr=value] - 选取带有指定属性和值的元素
  • [attr~=value] - 选取属性值中包含指定词汇的元素
  • [attr|=value] - 选取属性值以指定值开头的元素
  • [attr^=value] - 选取属性值以指定值开头的元素
  • [attr$=value] - 选取属性值以指定值结尾的元素
  • [attr*=value] - 选取属性值中包含指定值的元素

七、选择器的优先级与特异性

当多个选择器应用于同一个元素时，CSS通过特异性规则来确定哪个样式规则最终生效。特异性值通常由四个部分组成：

  1. 行内样式（特异性值：1000）
  2. ID选择器（特异性值：100）
  3. 类选择器、属性选择器和伪类（特异性值：10）
  4. 标签选择器和伪元素（特异性值：1）

特异性值越高，优先级越高。当特异性值相同时，后定义的规则会覆盖先定义的规则。

可以使用!important声明来强制提高规则的优先级，但应谨慎使用，因为它会使样式难以维护。

八、选择器的最佳实践

  1. 避免过度使用ID选择器：ID选择器具有较高的特异性，难以覆盖，且不能复用。
  2. 优先使用类选择器：类选择器具有较好的复用性和适中的特异性。
  3. 避免过度嵌套：过度嵌套的选择器会增加特异性，使样式难以覆盖和维护。
  4. 合理使用通配符选择器：通配符选择器会影响页面性能，应谨慎使用。
  5. 利用分组选择器减少重复代码：将具有相同样式的选择器分组，提高代码的可维护性。

结语

CSS选择器是前端开发的基石，掌握各种选择器的特性和使用方法对于编写高效、可维护的CSS代码至关重要。通过合理组合不同类型的选择器，我们可以精确地选取目标元素，实现复杂的样式效果。建议读者在实际项目中多加练习，逐步掌握选择器的使用技巧，提升前端开发能力。

avatar
文章
阅读
粉丝