Question

如果父元素的第一个元素类型不匹配，那么如果它不是第一个子元素，如何匹配该元素？

我需要一个与第一个子元素匹配的CSS选择器，如果它是header父元素的body元素：

<body><header>

但如果选择器不是header元素的第一个子元素，那么我不能让选择器与body元素匹配：

<body><div></div><header>

Answer 1

您只是在寻找:first-child。

＆＃13;

body > header:first-child {
  color: yellowgreen;
}

＆＃13;

<body>
  <header>Should match</header>
</body>

<body>
  <div></div>
  <header>Shouldn't match</header>
</body>

＆＃13;

Answer 2

除此之外，您还可以使用nth-child(1)。由于标题是父 body

的第一个孩子，所以下面的代码段会有效

body > header:first-child {
  background: tomato;
}

<body>
  <header>Header 1</header>
</body>

这不起作用，因为 div 是父元素的第一个子元素：

body > header:first-child {
  background: tomato;
}

<body>
  <div></div>
  <header>Header 1</header>
</body>

Answer 3

body header:first-of-type:not(nth-child(n+2)) { background: black; }