在這個例子中http://jsfiddle.net/rodrigolinkweb/k8qg14xL/我只需要選擇“Container 12”，我該怎么做？
ps：請注意，兩個 div 具有相同的類名“包裝器”。
.container:nth-child(n 3){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
uj5u.com熱心網友回復：
你可以用.wrapper班級選擇他們，像這樣
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>如果你想從后面選擇它，你可以使用 :nth-last-of-type() 。請參閱以下小提琴here
無論具有什么內容，.wrapper都:nth-child將根據其位置選擇子項，并:nth-of-type選擇具有適當屬性的子項。
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<a href="#">Some link</a>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/314644.html
上一篇：使用繼承的類中的模板顯式特化
下一篇：多型和with陳述句