CSS一般兄弟選擇特異性

爲一個文件：CSS一般兄弟選擇特異性

<h1>Section 1</h1> 
<p>I came after a h1 and should be red.</p> 
<p>I came after a h1 and should be red.</p> 

<h2>Section 2</h2> 
<p>I came after a h2 and should be green.</p> 
<p>I came after a h2 and should be green.</p> 

<h1>Section 3</h1> 
<p>I should be the same color as the section one text?</p> 
<p>I should be the same color as the section one text?</p>

我試過的風格是：

h1 ~ p { 
    color: red; 
} 

h2 ~ p { 
    color: green; 
}

http://jsfiddle.net/4ks7j938/7/

我預計，第1和第3將具有相同的風格，第三段與更具體的h1 ~ p選擇器匹配，因爲h1比更接近兄弟10。但是，在我的測試中，結果是第2段和第3段的樣式相同。

兩個問題：

請問CSS選擇器的規格其實某處指定此行爲？ css spec on the General sibling selector似乎可以在這裏解釋。

我怎樣才能達到第1段和第3段的樣式相同的預期結果？我不能添加類或任何屬性的HTML，我只能控制CSS。

來源

2014-12-11 Matt Bierner

關於[計算選擇特異性]（http://www.w3.org/TR/css3-selectors/#specificity）一節從未提及組合器，所以假設或甚至推斷組合器對於選擇特異性。 – BoltClock 2014-12-11 05:31:11

至於達到預期的結果，Musa是正確的：在給定文檔結構的情況下，您將無法使用純CSS完成此操作。類似問題：http://stackoverflow.com/questions/10427998/targeting-more-than-one-following-element-with-elementelement http://stackoverflow.com/questions/13330757/target-all-general-siblings-相同類型之前的下一個出現 – BoltClock 2014-12-11 05:32:25

這兩個選擇器具有相同的特徵，導致h2 ~ p優先的原因在於它是在後面定義的，因此級聯在h1 ~ p之上。兄弟姐妹之間的距離是多麼的無關緊要。
對於您想要的行爲，您可以使用adjacent sibling selector+。

如果你改變了h1 ~ p後，你會看到它需要precidience

h2 ~ p { 
 
    color: green; 
 
} 
 

 
h1 ~ p { 
 
    color: red; 
 
}

<h1>Section 1</h1> 
 
<p>I came after a h1 and should be red.</p> 
 
    
 
<h2>Section 2</h2> 
 
<p>I came after a h2 and should be green.</p> 
 

 
<h1>Section 3</h1> 
 
<p>I should be the same color as the section one text?</p>

來源

2014-12-11 04:21:48 Musa

您剛剛擊敗了我：p – Bill 2014-12-11 04:22:38

您的訂購說明很有意義（但仍不是我的預期）。但是，您的鄰居兄弟選擇器解決方案不起作用，或者說它的工作原理足以解決最初發布的非常有限的示例問題。它不適用於每個部分的多個元素，但我更新了jsfiddle和示例。 – 2014-12-11 04:28:13

@MattBierner我想不出解決你的問題的一般目的，我只會用'h1 + p，h1 + p + p，h1 ...'來表示可能有多少'p' – Musa 2014-12-11 04:39:54

-1

您可以使用此代碼：

h1 ~ p { 
    color: red; 
} 
h2+p{ 
    color: green; 
}

來源

2014-12-11 04:24:55

你的代碼有h1 CSS標籤在第一行，所以它會尋找全部爲p標籤，該標籤是該h1標籤的兄弟，並將紅色應用於所有p標籤。在下一行它會找到兩個p標籤，它們在第一個'h1 tag and those two p`標籤將被應用第二個css。這是一個激動人心的問題，你有。 現在解決問題的方法是CSS3adjecent siblings selector

看看這個小提琴：http://jsfiddle.net/4ks7j938/9/

來源

2014-12-11 04:30:51 Innodel

查看更新每個部分有很多元素的例子，爲什麼相鄰選擇器不適用於更一般的情況：http://jsfiddle.net/4ks7j938/10/ – 2014-12-11 04:35:33

什麼棘手的問題！如果您有權限添加一些jQuery，則可能會使用某些traversing methods。下面的工作，但你需要使它適合你的具體需求，所以另一種方法可能會更好。

$("h1") 
    .nextUntil("h2") 
    .css("color", "red"); 

$("h2") 
    .nextUntil("h1") 
    .css("color", "green");

updated fiddle

來源

2014-12-11 04:51:30 lukeocom

問題是CSS選擇器和特異性的基本誤解。你的答案是「讓它使用JavaScript」，而不是試圖真正理解CSS中發生了什麼。 – Zaqx 2014-12-11 05:04:22

其他一些答案已經提供瞭解如何解決這個問題的CSS。我發現這個jQuery方法實際上解決了這個問題，並且建議可能還有其他的選擇。我不是說要擰它，我只是提供另一種可能的解決方案。搭建一座橋樑。 – lukeocom 2014-12-11 06:44:23

穆薩似乎是正確的，你不能只使用CSS在一般情況下解決這個問題。

但這裏有三個部分的一個解決方案：

h1 ~ p, 
h1 ~ h1 ~ p { 
    color: red; 
} 

h2 ~ p { 
    color: green; 
}

http://jsfiddle.net/4ks7j938/12/

或者，根據的交錯的數量，這也可以正常工作，並可能擴展到更多的部分：

h1 ~ p, 
h1 ~ h2 ~ h1 ~ p, 
h1 ~ h2 ~ h1 ~ h2 ~ h1 ~ p 
/* add more as needed */ { 
    color: red; 
} 

h2 ~ p, 
h2 ~ h1 ~ h2 ~ p, 
h2 ~ h1 ~ h2 ~ h1 ~ h2 ~ p 
/* add more as needed */ { 
    color: green; 
}

http://jsfiddle.net/4ks7j938/15/

然而，這兩種方法都不是特別可擴展的。

來源

2014-12-11 06:20:01

CSS一般兄弟選擇特異性

回答

相關問題