CSS選擇與特定的兄弟

Question

使用CMS生成如下：

<ul class="list-unstyled"> 
<li>content 1</li> 
<li>content 2</li> 
</ul> 
<ul class="list-unstyled"> 
<li> 
    <span>content 3</span> 
</li> 
<li> 
    <h2>content 4</h2> 
</li> 
</ul> 

我想CSS選擇「內容4」。 有許多<ul>標籤，其類別爲「list-unstyled」。 有沒有辦法選擇.list-unstyled > li > h2在李有兄弟姐妹li > span

這是使所必要的，我不選擇不只是內容更加4.有一種可能性，即有在另一個地方，但沒有兄弟姐妹li > span一個.list-unstyled > li > h2

希望我自己清楚

Answer 1

有沒有辦法選擇.list-unstyled > li > h2在李有兄弟姐妹li > span

不，因爲無法表達li在選擇器中具有span子級以用於兄弟關係。請參閱Is there a CSS parent selector?

查看您是否可以改變CMS的輸出，以某種方式爲您的元素生成必要的類。

Answer 2

你的意思是這樣

ul > li + li > h2{color:green}

<ul class="list-unstyled"> 
 
<li>content 1</li> 
 
<li>content 2</li> 
 
</ul> 
 
<ul class="list-unstyled"> 
 
<li> 
 
    <span>content 3</span> 
 
</li> 
 
<li> 
 
    <h2>content 4</h2> 
 
</li> 
 
</ul>

基本上CSS可以不看向上。

您可能想要查看javascript和dom元素屬性，以獲得基於條件測試的更加自定義的方法; ，但也許它更容易更改標記:)