前端从零开始第二周：CSS基础选择器复合用法

前端

2024-01-28 20:39:11

前言

在前端学习的第二周，我们继续深入探索CSS选择器的奥秘，重点放在复合选择器上。复合选择器是基础选择器的扩展，用于选择更精确的目标元素标签。复合选择器由两个或以上的基础选择器组合而成，通过不同的组合方式，可以实现更加灵活和强大的元素选择。

六种复合选择器

CSS复合选择器共有六种，分别是：

后代选择器 ：后代选择器使用空格符号（空格）将两个选择器分隔开，选择所有符合条件的元素及其后代元素。例如，div p选择器选择所有<div>元素及其后代的<p>元素。
子代选择器 ：子代选择器使用大于号（>）符号将两个选择器分隔开，选择所有符合条件的元素的直接子元素。例如，div > p选择器选择所有<div>元素的直接子<p>元素。
相邻选择器 ：相邻选择器使用加号（+）符号将两个选择器分隔开，选择与符合条件的元素相邻的元素。例如，div + p选择器选择所有紧跟在<div>元素后面的<p>元素。
通用选择器 ：通用选择器使用星号（*）符号，选择所有元素。例如，*选择器选择所有元素。
ID选择器 ：ID选择器使用井号（#）符号，选择具有指定ID的元素。例如，#my-id选择器选择具有ID为“my-id”的元素。
类选择器 ：类选择器使用句点（.）符号，选择具有指定类的元素。例如，.my-class选择器选择具有类名为“my-class”的元素。
伪类选择器 ：伪类选择器使用冒号（:）符号，选择符合特定状态的元素。例如，:hover选择器选择鼠标悬停在该元素上的元素。

复合选择器实例

为了更好地理解复合选择器的用法，我们来看几个实例：

/* 选择所有具有类名为“container”的元素及其后代的`<p>`元素 */
.container p {
  color: red;
}

/* 选择所有直接子元素为`<p>`元素的`<div>`元素 */
div > p {
  margin-top: 10px;
}

/* 选择所有紧跟在`<div>`元素后面的`<p>`元素 */
div + p {
  border-top: 1px solid black;
}

/* 选择所有`<p>`元素 */
p {
  font-size: 16px;
}

/* 选择具有ID为“my-id”的元素 */
#my-id {
  background-color: blue;
}

/* 选择具有类名为“my-class”的元素 */
.my-class {
  text-align: center;
}

/* 选择鼠标悬停在该元素上的元素 */
:hover {
  cursor: pointer;
}