理解CSS子選擇

-1

我不能夠使用nth-child或以下的HTML結構的nth-of-type：理解CSS子選擇

<div class="wrapper"> 
    <div class="child_1">Child 1</div> 
    <div> Not child 1 </div> 
    <div class="child_1">Child 1</div> 
    <div class="child_1">Child 1</div> 
</div>

我想要做的是選擇第二child_1，但我怎麼也找不到。有沒有人有我的答案？

來源

2017-07-26 freeman167

這是關閉的話題在這裏交配。你應該閱讀一些基本的CSS教程。 – user5014677

.wrapper div.child_1：nth-child（2） – Gerard

您無法選擇nth-of-type作爲課程。您必須改爲以div爲目標。

從MDN：

nth-of-type

nth-child

.wrapper div:nth-child(3) { 
 
    color: red; 
 
}

<div class="wrapper"> 
 
    <div class="child_1">Child 1</div> 
 
    <div> Not child 1 </div> 
 
    <div class="child_1">Child 1</div> 
 
    <div class="child_1">Child 1</div> 
 
</div>

來源

2017-07-26 08:51:36 sol

'nth-child'和'nth-of-type'是僞類（CSS3選擇器標準）。按照CSS3標準，僅接受僞元素類，並且僞類不可能。 –

非常感謝！ – freeman167

@ovokuro：你可以找這個https://jsfiddle.net/hv3vqazk/。我看到我可以在這裏按課程選擇。 – freeman167

-1

這將做你的工作。

.wrapper .child_1:nth-child(3){ 
 
    background:red; 
 
}

<div class="wrapper"> 
 
     <div class="child_1">Child 1</div> 
 
     <div> Not child 1 </div> 
 
     <div class="child_1">Child 1</div> 
 
     <div class="child_1">Child 1</div> 
 
    </div>

但是如果你想下站在child選擇。有幾種類型的選擇。像nth-child，nth-of-type，first-child和last-child

在此示例中，您不能使用nth-of-type但可以使用休息。如果這是一個長期的孩子羣體，你不能選擇底部，你可以使用。

.wrapper .child_1:last-child{ 
    background:red; 
}

，如果你想選擇的second last child你可以使用：使用first-child兒童選擇

.wrapper .child_1:last-child(2){ 
    background:red; 
}

這還要從top。 ty

來源

2017-07-26 08:58:07 weBBer

雖然這將工作，選擇器實際上是目標'div'，而不是班級。（我沒有downvote） – sol

他想在Q中選擇'2nd child_1'，所以我的回答是正確的。如果班級不在那裏，我的回答將不起作用。那麼爲什麼'downvote'，如果答案是正確的那麼請不要低估你們。不要破壞Stackoverflow的值。 – weBBer

理解CSS子選擇

回答

相關問題