html - 第一个元素的 CSS 选择器不是 sibling

Question

我想知道这是否可能。使用此 html:

<h1></h1>
<form>
    <label><input type="text"></label>
    <label><input type="text"></label>
    <label><input type="text"></label>
</form>

我知道我能做到:

label:first-child{}

但我想知道是否可以只选择前面有 h1 的第一个标签，该标签与 + 或 ~ 或其他内容不在同一级别。

Answer 1

您可以使用以下选择器:

h1 + form > label:first-child {
   /* some properties here */
}

所以上面的选择器将选择 form 元素，它是 h1 的兄弟元素，然后它进入并选择第一个直接 label元素，因此我正在使用 >

如果您确定您的 form 元素中可能没有任何进一步嵌套的 label 元素，您可以安全地删除 > .

---

请注意，这是一个非常通用的标签选择器，我建议您将元素包装在一个包装器元素中并给它一个 class 说 form-wrapper 并修改你的选择器喜欢

.form-wrapper h1 + form > label:first-child {
  /* some stuff */
}