CSS 后代选择器 - 后代列表开头的锚元素破坏了样式

Question

我试图仅对 p 和 a 元素应用样式，它们是具有 class“some-class”的任何元素的后代。根据 https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list，下面的代码应该提供预期的行为。但是，样式意外地应用于 all 和 p 元素。有趣的是，如果我重新排序后代列表，即 .some-class p,a，我就能得到正确的行为。有人可以解释为什么会这样吗？

仅供参考 - 我运行 Firefox 和 Chrome 中的代码具有相同的结果。

<html>
<head>
<style>
.some-class a,p {
     color: red;
}
</style>
</head>
<body>

<div>
    <p>should not be red</p>
</div>

<div class="some-class">
    <p>should be red</p>
</div>

</body>
</html>

Answer 1

您 select 所有 a 类名称为 some-class 的元素内的元素，然后您 select 所有 p 元素。您必须指定您还想要 select 所有 p 类名称为 some-class 的元素内的元素，如下所示：

.some-class a,
.some-class p {
   color: red;
}

还有一种更现代的方法：

.some-class :is(a,p) {
   color: red;
}

CSS 后代选择器 - 后代列表开头的锚元素破坏了样式

CSS descendant selector - anchor element in beginning of descendant list breaks styling

css

selector

descendant