第一个元素的CSS选择器接连不是兄弟姐妹

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元素,因此我正在使用>

>如果您确定label元素中可能没有任何其他嵌套元素,则可以安全地删除它form.

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

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