如何在 CSS 中选择紧邻另一个元素之前的元素？

理解 div p 和 div ~ p 之间的区别

在 CSS 选择器中，加号 ( ) 和波形符 (~) 运算符都选择指定元素的同级元素。但是，它们的行为根据元素相对于其同级元素的位置而有所不同。

div p（相邻同级选择器）

此选择器匹配所有

。紧接在

之后的元素元素。例如：

div + p {
  color: red;
}

在这种情况下，只有每个

后面的第一段才有效。将显示红色文本。

div ~ p（通用同级选择器）

此选择器匹配所有

前面有

的元素元素，无论其位置如何。例如：

div ~ p {
  color: blue;
}

在这种情况下，任何

之后的所有段落都将包含在

中。元素将具有蓝色文本。

澄清问题

问题要求一个选择器选择紧邻给定元素之前放置的元素。这是无法通过 div p 或 div ~ p 选择器实现的。

前面元素的相邻同级选择器

要选择紧邻另一个元素之前的元素，您可以可以以相反的顺序使用相邻的同级选择器：

X Y在此语法中，X

是前面的元素，

p + ul {
  color: green;
}

Y

是选择器的主题。例如：

此选择器将仅将绿色文本应用于每个段落后的第一个无序列表。

以上是如何在 CSS 中选择紧邻另一个元素之前的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！