我如何對兩個相同的類div進行不同的設計？

所以基本上我已經得到了吐出來以下列方式將代碼安裝..我如何對兩個相同的類div進行不同的設計？

<div class="parent"> 
    <div class="subparent"> 
     <div class="TARGETCLASS"></div> 
    </div> 
    <div class="subparent"> 
     <div class="TARGETCLASS"></div> 
    </div> 
</div> //close for the parent class

現在我想要做的就是風格「TARGETCLASS」自帶上面的一種方式和「 TARGETCLASS「以另一種方式排在第二位。我試過第n個孩子，但無法達到我期待的結果。沒有辦法將其他類或ID添加到現有的「TARGETCLASS」類中。否則，我不會發布這個問題:)

此外，「subparent」類也是相同的。對於這兩個目標類的類。這是問題在此先感謝您花時間爲我回答這個問題。

乾杯！

來源

2017-09-02 Ashtheslayer

[n個子selctor CSS（可能的重複https://stackoverflow.com/questions/40400955/nth-child-selctor-css） – Hobo

我會用第n-的類型選擇，像這樣：

.parent{} 
.parent > .subparent {} //targets both subparents 
.parent > .subparent:nth-of-type(2) {} //targets the second subparent 
.parent > .subparent:nth-of-type(2) > .TARGETCLASS{} //targets the child of the second subparent

第N級的類型（）選擇使您能夠風格在這個例子中，我們針對第二個.subparent然後指定了我們需要的孩子。我希望這有助於！

來源

2017-09-02 14:54:44

完美。這筆交易已經完成。謝啦！ – Ashtheslayer

看起來你在你的html中有一些不正常的標籤。 nth-child應該可以正常工作。此外，請確保將nth-child選擇器放置在subparent類上，而不是TARGETCLASS。錯誤放置子選擇器很常見。試試這個：

<div class="parent"> 
    <div class="subparent"> 
    <div class="TARGETCLASS"> 
     first-child 
    </div> 
    </div> 
    <div class="subparent"> 
    <div class="TARGETCLASS"> 
     second-child 
    </div> 
    </div> 
</div> 

<style> 
.parent .subparent .TARGETCLASS { 
    background-color:#f00; 
} 
.parent .subparent:nth-child(1) .TARGETCLASS { 
    background-color:#0f0; 
} 
</style>

小提琴：https://jsfiddle.net/8ejxokuj/

來源

2017-09-02 14:53:46

您可以使用.parent .subparent:first-of-type來定位第一個，第二個可以使用.parent .subparent:nth-of-type(2)。

（您可以用同樣的方式使用first-child和nth-child只有所有的parent孩子有類subparent）

觀看演示如下：

.parent .subparent:first-of-type .TARGETCLASS { 
 
    color: red; 
 
} 
 

 
.parent .subparent:nth-of-type(2) .TARGETCLASS { 
 
    color: green; 
 
}

<div class="parent"> 
 
    <div class="subparent"> 
 
    <div class="TARGETCLASS">one 
 
    </div> 
 
    </div> 
 
    <div class="subparent"> 
 
    <div class="TARGETCLASS">two 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-09-02 14:58:15 kukkuz

@Ashtheslayer upvote如果這個答案幫助你，謝謝！ – kukkuz

看來，它正在第n個工作ILD。這是關於如何稱爲兒童。不喜歡「問父母找n個子，不過問孩子，是他如何遠離父母」

.parent .subparent:nth-child(1) {background: #FEE; color:RED;} 
 
.parent .subparent:nth-child(2) {background: #EEF; color:blue;}

<div class="parent"> 
 
<div class="subparent"> 
 
<div class="TARGETCLASS">aaa</div> 
 
</div> 
 
<div class="subparent"> 
 
<div class="TARGETCLASS">bbb</div> 
 
</div> 
 
//close for the parent class 
 
</div>

來源

2017-09-02 15:00:05 Zorak

我如何對兩個相同的類div進行不同的設計？

回答

相關問題