javascript - 第一个子样式仅适用于第一个元素

Question

我得到了一些代码，其中我通过第一个子元素选择一些元素，然后设置相应的样式。我注意到它的行为很奇怪，并且 css 仅应用于第一个元素。我尝试用 JS 选择它们，虽然我在做完全相同的事情，只是在另一个元素上，但它似乎不返回 div。

代码:

console.log(document.querySelector(".index-0:first-child")); // returns div
console.log(document.querySelector(".index-1:first-child")); // returns null

.index-0:first-child {
  color: green;
}

.index-1:first-child {
  color: blue;
  /* doesn't work */
}

<div class="index-0">
  <p class="message"></p>
  <div class="shout">
    <span>Message 1</span>
  </div>
</div>
<div class="index-1">
  <p class="message"></p>
  <div class="shout">
    <span>Message 2</span>
  </div>
</div>

jsfiddle:https://jsfiddle.net/a4k03eny/1/

Answer 1

您误解了 CSS 选择器的工作原理。 (您并不孤单；这是一个非常常见的误解。)像 .index-1:first-child 或 div.foo 这样的复合选择器是“AND”运算它们各自的部分:.index-1:first-child 表示它与具有 index-1 类的元素匹配，并且 是第一个其 parent 的 child 。您的 .index-1 元素不是其父级中的第一个子级，而是第二个子级。

在本例中，您可以使用 .index-1 来设置其样式，而不使用 :first-child 位。

(如果您的目标是在 .index-1 内设置第一个子元素的样式，请添加 > (a child combinator ):

.index-1 > :first-child {
    color: green;
}

...但我不认为这就是你想要做的。或者您可以使用空格 [a descendant combinator] ，但这将适用于 .index-1 中作为其父级的第一个子级的所有元素，我也怀疑这不是您想要做的。)

<小时/>

来自您的评论:

I want to style the first element that has a new class differently.

您可以通过将 .index-1:first-child 与 :not(.index-1) + .index-1 组合来做到这一点:

.index-1:first-child, :not(.index-1) + .index-1 {
    color: blue;
}

后者使用相邻同级组合器来表示“将规则应用于不紧接在 .index-1 之后的 .index-1” ):

console.log(document.querySelector(".index-0:first-child, :not(.index-0) + .index-0"));
console.log(document.querySelector(".index-1:first-child, :not(.index-1) + .index-1"));

.index-0:first-child, :not(.index-0) + .index-0 {
    color: green;
}

.index-1:first-child, :not(.index-1) + .index-1 {
    color: blue;
}

<div class="index-0">
  <p class="message"></p>
  <div class="shout">
    <span>Message 1</span>
  </div>
</div>
<div class="index-1">
  <p class="message"></p>
  <div class="shout">
    <span>Message 2</span>
  </div>
</div>

当然，这需要您专门设置它们的样式(.index-0、.index-1 等规则)。在 CSS 中一般无法做到这一点，但在 JavaScript 中却可以。这将查看具有 index 类的所有元素，挑选出它们的 index-N 类名(如果有)，并将 highlight 添加到第一个在任何给定的运行中:

var lastClass = null;
document.querySelectorAll(".index").forEach(function(e) {
  var m = e.className.match(/(?:^| )(index-\d+)(?: |$)/);
  var thisClass = m ? m[1] : null;
  if (thisClass != lastClass) {
    lastClass = thisClass;
    e.classList.add("highlight");
  }
});

示例:

var lastClass = null;
document.querySelectorAll(".index").forEach(function(e) {
  var m = e.className.match(/(?:^| )(index-\d+)(?: |$)/);
  var thisClass = m ? m[1] : null;
  if (thisClass != lastClass) {
    lastClass = thisClass;
    e.classList.add("highlight");
  }
});

.highlight {
    color: green;
}

<div class="index index-0">
  <p class="message"></p>
  <div class="shout">
    <span>first .index-0</span>
  </div>
</div>
<div class="index index-0">
  <p class="message"></p>
  <div class="shout">
    <span>second .index-0 in a row</span>
  </div>
</div>
<div class="index index-1">
  <p class="message"></p>
  <div class="shout">
    <span>first .index-1</span>
  </div>
</div>

注意:许多浏览器现在支持 querySelectorAll 返回的 NodeList 上的 forEach，但并非所有浏览器都支持。如果缺少，您可以填充它:

if (typeof NodeList !== "undefined" &&
    NodeList.prototype &&
    !NodeList.prototype.forEach) {
    Object.defineProperty(NodeList.prototype, "forEach", {
        value: Array.prototype.forEach
    });
}