html - 有没有等价于 JS querySelector 的 CSS 选择器？

Question

编辑:This question与我自己的相似，但它并不完全重复，因为我了解 :first-child 的伪选择器是如何工作的。和 :first-of-type实际工作。问题不是“为什么我的选择器不工作”，而是“除了什么选择器只是简单的 :first-child 我可以在我的情况下使用吗？”该问题的公认答案只是解释了我已经知道的信息。

===

在 JavaScript 中，当您使用 element.querySelector('a') 时，它将返回第一个 <a>它在元素内部找到的标记，无论多深，都不会继续搜索更多元素。

在CSS中，你可以使用像.element a这样的空格。 , 它将适用于每一个 <a>它在元素内部找到的标签，无论多深。这更类似于 element.querySelectorAll('a')如果将其与 JavaScript 进行比较。

甚至.element > a适用于每个 <a>标签是元素的直接子元素，仍然不太正确和我宁愿不依赖于嵌套级别。 .element a:first-child更接近，但仍不完美。如果您的结构如下所示，这将仍然应用于多个元素:

<span class="element">
  <span>
    <a>Demo</a> <!-- I only want to select this one -->
    <a>Demo</a>
  </span>
  <span>
    <a>Demo</a>
    <a>Demo</a>
  </span>
</span>

在上面的示例中，您可以假设使用 .element > span:first-child > a:first-child , 但这变得非常严格并且在很大程度上取决于嵌套结构，在我的情况下，嵌套结构会根据它在文档中出现的位置而变化。通常我会调整 HTML 以获得更一致和更简单的结构，但我现在没有那种自由，我只需要使用可用的东西。

是否有某种 CSS 魔术可以让我只选择第一个匹配项，而不考虑深度？还是我只是需要额外的类(class)？

Answer 1

没有一个选择器可以涵盖这一点。

因此您几乎有两种选择，要么添加一个类，要么使用这个技巧，您可以在其中以一种视觉上看起来只影响您关心的元素的方式应用样式。

这个想法只是让第一个选择器的一半正确 .element a:first-of-type然后覆盖/恢复与第二个选择器错误匹配的那些 .element :not(:first-child) a - 这也将匹配 <a>不是 first-of-type 的标签, 所以它似乎是将默认样式与 .element a 放在一起的好地方, 覆盖其余部分。

.element {
  display: block;
}

/* first <a> tags to appear at any level turn blue */
.element a:first-of-type {
  color: blue;
}

/* "restore" styling on <a> tags with any parent that isn't the first child */
/* also, set default styling in one place */
.element :not(:first-child) a,
.element a {
  color: black;
}

<span class="element">
  <span>
    <a>Demo</a> <!-- Select this one -->
    <a>Demo</a>
  </span>
  <span>
    <a>Demo</a>
    <a>Demo</a>
  </span>
</span>

<span class="element">
  <span>
    <span>
      <a>Demo</a> <!-- Select this one, further nested -->
      <a>Demo</a>
    </span>
  </span>
  <span>
    <a>Demo</a>
    <a>Demo</a>
  </span>
</span>