選擇包含css的div div

我有一個簡單的標記，我想從它的內容中選擇一個div。這裏是我的代碼...選擇包含css的div div

<div class="parent"> 
    <h4>Child of parent</h4> 
    <div> 
     <div>I'm red!</div> 
     <h4>I'm red's sister</h4> 
     <div>I'm blue!</div> 
     <h4>I'm blue's brother</h4> 
    </div> 
</div>

，並選擇<div>I'm red!</div>與下面的CSS ...

div:contains("I'm red!") { 
    color: red; 
}

因爲已過時或從來沒有得到實現，我可以做以下...

.parent div:nth-child(1) { 
    color: red; 
} 
.parent dh4:nth-child(2) { 
    color: red; 
}

只針對前兩個元素，它的工作，但我想知道，如果這是一種方式，我可以只針對頭兩個元素髮生是<div>和<h4>在一行CSS代碼行嗎？我需要這樣做，而不需要javascript。最終我只需要瞄準第三和第四。

來源

2017-01-07 Gilbert

是。使用:nth-child(-n+2)。

對於第三和第四你可以使用:nth-child(n+3):nth-child(-n+4)或只是:nth-child(-n+4)並讓它專門爲你解決它。

的邏輯是容易的：

:nth-child(-n+a)選擇第a元件和其先前的兄弟姐妹
:nth-child(n+a)選擇第a元件和其以下的兄弟姐妹
:nth-child(n+a):nth-child(-n+b)選擇第a和第二元素，以及中間的兄弟姐妹。

.parent > div > :nth-child(-n+4) { 
 
    color: blue; 
 
} 
 
.parent > div > :nth-child(-n+2) { 
 
    color: red; 
 
}

<div class="parent"> 
 
    <h4>Child of parent</h4> 
 
    <div> 
 
    <div>I'm red!</div> 
 
    <h4>I'm red's sister</h4> 
 
    <div>I'm blue!</div> 
 
    <h4>I'm blue's brother</h4> 
 
    </div> 
 
</div>

來源

2017-01-07 15:49:57 Oriol

我不認爲我理解你的問題。無論如何，你可以做到這一點。

.parent div:nth-child(1), .parent dh4:nth-child(2) {color: red;}

，或者你可以申請在第一兩個div紅色類，做：

.red{color:red}

來源

2017-01-07 15:49:50

選擇包含css的div div

回答

相關問題