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元素，因此使用{{1} }

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

请注意，这是一个非常通用的标记选择器，我建议你将元素包装在一个包装元素中，然后给它form说class并修改你的选择器，如

form-wrapper

Answer 2

＆＃13;

h1 + form label:first-child {
  color: red;
}

＆＃13;

<h1>H1</h1>
<form>
  <label>First</label>  
  <label>Second</label>  
  <label>Third</label>  
</form>

<h2>H2</h2>
<form>
  <label>First</label>  
  <label>Second</label>  
  <label>Third</label>  
</form>

＆＃13;

Answer 3

您可以使用+访问下一个兄弟，然后使用后代选择器定位标签。

＆＃13;

h1 + form label:first-child {
  padding-right: 120px;
}

＆＃13;

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

＆＃13;

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

3 个答案: