第一個元素之後的另一個不是兄弟姐妹的CSS選擇器

Question

我不知道這是否可能。有了這個網站：

<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 */ 
} 

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

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