不能使用具有子選擇器的第一種類型的選擇器

我試圖直接在其.page-container父級中直接定位.row的第一個實例。我無法使:first-of-type選擇器正確定位.row的第一個實例。不能使用具有子選擇器的第一種類型的選擇器

.page-container > .row:first-of-type { 
 
    background: blue; 
 
}

<div class="page-container"> 
 
    <div class="row">Target This Row</div> 
 
    <div class="row">Don't Target</div> 
 
    <div class="row">Don't Target 
 
    <div class="row">Don't Target</div> 
 
    </div> 
 
</div>

請幫我的目標只有.row第一個實例是.page-container的直系後裔。

來源

2016-07-14 MrGood

https://jsfiddle.net/k54x0czj/ – potashin

作爲@potashin指出的那樣，你的代碼似乎工作得很好。除非我們誤解了你的問題？ – Quiver

我碰到這個問題跑了相對較近。

的問題是，:first-of-type具體是指第一-此型OF-的元件和它不能（並且不）適用於類。

爲了有適用於類的選擇，我們需要或者:first-of-class或:first-of-query（可以選擇什麼 - 包括類） - ，到目前爲止，既不存在。

因此你需要的東西是這樣的：

.page-container div:first-of-type.row

這意味着：嵌套.page-container

第一div - 但只有如果也恰好有類.row。

來源

2016-07-14 21:16:42 Rounin

我想你想要的是

.page-container > .row:first-child { 
    background: blue; 
}

來源

2016-07-14 21:09:59

我通常會忽略類或id並集中在標記名稱上，如果它太寬泛，我會通過向父級添加class或id來縮小它的範圍。

div > div:first-of-type { 
 
    background: blue; 
 
} 
 
div.page-container > div:first-of-type { 
 
    border: 3px solid red; 
 
} 
 
p:first-of-type { 
 
    color: blue 
 
} 
 
p:last-of-type { 
 
    color: red; 
 
}

<p>Example #1 in blue background</p> 
 
<p>Example #2 in red border</p> 
 
<div class="page-container"> 
 
    <div class="row">Target This Row</div> 
 
    <div class="row">Don't Target</div> 
 
    <div class="row">Don't Target 
 
    <div class="row">Don't Target</div> 
 
    </div> 
 
</div>

來源

2016-07-14 22:05:01 zer00ne

不能使用具有子選擇器的第一種類型的選擇器

回答

相關問題