nth孩子divs不直接兒童

我想設置第二個文本塊有不同的背景顏色，但他們不是直接的孩子。這仍然可以不使用jQuery？nth孩子divs不直接兒童

.wrapper .text-block:nth-child(2) { 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div class="text-block">text-block</div> 
 
    <div class="heading">heading</div> 
 
    <div class="text-block">text-block</div> 
 
</div>

使其更清晰對不起，我想text-block的div有第二個元素在不同的背景。他們是wrapper div的孩子，顯示在上面的代碼片段中。

來源

2016-11-16 SamXronn

你所說的「沒有直接的孩子」的意思是？ –

他們是否可以預測另一種元素的類型？他們是包裝師或者某種元素下的一個div的子女嗎？ –

'.wrapper.text-block'會打到'class =「包裝文本塊」 –

我希望文本塊div在第二個元素上有不同的背景。他們是上面代碼片段中顯示的包裝div的子代。

實現此目標的最可靠的方法是不使用<div>元素。你.heading類意味着該<div>是標題，所以代替<div>的，你可以使用一個<header>元素代替：

<div class="wrapper"> 
    <div class="text-block">text-block</div> 
    <header>heading</header> 
    <div class="text-block">text-block</div> 
</div>

現在，選擇你的第二.text-block元素，您只需要使用:nth-of-type選擇：

.wrapper .text-block:nth-of-type(2) { 
    background-color: red; 
}

.wrapper .text-block:nth-of-type(2) { 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div class="text-block">text-block</div> 
 
    <header>heading</header> 
 
    <div class="text-block">text-block</div> 
 
</div>

來源

2016-11-16 16:56:08

頁面的結構不固定，因此可以將附加div與其他內容元素一起添加到類包裝器中，例如，畫廊塊。我期待着在「wrapper」div裏面的所有div都用類名「text-block」來計數，而在第二個div上的任何位置都是例如。第四個div改變背景顏色 – SamXronn

@SamXronn然後不，沒有一個方法可以做到這一點，而不需要引入一些JavaScript或者修改生成HTML的任何東西來爲第二個'.text-block'元素添加一個獨特的屬性。 CSS沒有'.nth -...'版本，它可以滿足每個孩子或特定類型以外的任何東西。 –

@SamXronn你的情況可能有其他解決方法。是否'.text-block'總是在'.heading'之後找到，與第一個不同？如果是這樣，你可以使用'.heading + .text-block'。會不會只有兩個'.text-block'元素？如果是這樣，你可以使用'.text-block〜.text-block'在第一個'.text-block'之後選擇任何'.text-block'。 –

對於這個特定的情況下，只是目標，你可以使用類似這樣的第二個元素：

.wrapper .text-block ~ .text-block { 
 
    background-color: red; 
 
} 
 
.wrapper .text-block ~ .text-block ~ .text-block { 
 
    background-color:transparent; 
 
}

<div class="wrapper"> 
 
    <div class="text-block">text-block</div> 
 
    <div class="heading">heading</div> 
 
    <div class="text-block">text-block</div> 
 
    <div class="text-block">text-block</div> 
 
    <div class="text-block">text-block</div> 
 
</div>

如何運作？

目標和改變所有元素text-block第一個

.wrapper的.text塊〜的.text塊後

重設第二個元素後的屬性text-block

.wrapper的.text塊〜的.text塊〜的.text塊

這種解決方案的問題是，你只是不針對單獨第二元素它的工作原理，你會的方式需要重置或更改第二個元素後面的元素的屬性。

來源

2016-11-16 17:02:31 DaniP

雖然這是一個解決方案，但值得提醒一點，這是值得的。這種方法意味着對OP的第二個'.text-block'所做的每一項變更，特別是該元素的內容都必須重置。 –

您能否擴展內容被重置的警告？ – SamXronn

@JamesDonnelly yep我已經在答案上省略了它，但將其作爲註釋添加以使其保持清晰 – DaniP

-1

如果你的代碼結構完全一樣，你貼我認爲它的代碼只是使用

.wrapper .text-block:not(:nth-child(1))

.wrapper .text-block:not(:nth-child(1)) { 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div class="text-block">text-block</div> 
 
    <div class="heading">heading</div> 
 
    <div class="text-block">text-block</div> 
 
</div>

來源

2016-11-16 17:05:38

nth孩子divs不直接兒童

回答

相關問題