CSS选择器的第一个元素后另一个不是兄弟答案

【问题标题】：CSS selector for the first element after another not being siblingsCSS选择器的第一个元素后另一个不是兄弟
【发布时间】：2015-07-10 17:29:43
【问题描述】：

我想知道这是否可能。使用这个 html：

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

我知道我能做到：

label:first-child{}

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

【问题讨论】：

标签： html css css-selectors

【解决方案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 */
}

【讨论】：

我同意你的观点，但在这种情况下，页面不会有更多的表单
@Mr.外星人你觉得你能帮我解决这个问题吗goo.gl/Yl5qIi
@Axel 粘贴原链接，缩小后的不会点击
很抱歉。这是原始的：stackoverflow.com/questions/33054526/…

【解决方案2】：

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

<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>

【讨论】：

【解决方案3】：

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

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

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

【讨论】：