CSS同級選擇器不能在裏面工作：not（）

我知道使用純CSS不可能選擇元素的以前的同胞。但我試圖用複雜的選擇器欺騙瀏覽器。
請參閱此jsFiddle。它包含了除其中2個是做工精細幾個CSS規則：CSS同級選擇器不能在裏面工作：not（）

//set border color to white for all elements before .selected and .selected itself 
div:not(.selected ~ div) { 
    border-color: #fff; 
} 

//set border color to green for the element previous to .selected 
div:not(.selected ~ div):nth-last-child(2) { 
    border-color: #0f0; 
}

但似乎這裏面:not()兄弟選擇~不起作用。
所以這兒有2個問題：

難道預計~並不裏面:not()工作？
有沒有針對這種情況的解決方法？

編輯：
最終的想法是讓與像純CSS一個不錯的懸停效果： enter image description here
懸停圖像被簡單地縮放，圖像的正確可以發現並輕鬆風格，但左邊的那個...... div的例子就是一個例子。

來源

2014-12-29 Kiril

我認爲唯一的（純CSS）方法是將所有邊框設置爲白色，然後覆蓋.selected之後的所有元素的樣式。 jQuery也可以幫助你使用index（）和n-child，但是它會使用一個火箭筒來殺死一隻蒼蠅 – FLX

根據[（這裏的規格）]（http://www.w3.org/TR/css3 -selectors /＃negation）：只允許簡單的選擇器作爲'：not'的參數。所以，你不能使用組合器，只有簡單的選擇器。 – Abhitalks

其中的一種情況是，你過度想辦法取得相當簡單的結果。有時候，我們來到這裏並不是一個好的解決方案，並且希望人們在實際上通過暴露原始問題來解決問題會帶來快速和簡單的解決方案。 :) – melancia

:not()僞類不能包含兄弟選擇器。

http://dev.w3.org/csswg/selectors3/#negation

的否定僞類，：未（X），是一種功能性表示法服用簡單選擇（不包括否定僞類本身）作爲參數。

http://dev.w3.org/csswg/selectors3/#simple-selectors-dfn

甲簡單選擇要麼是一個類型選擇器，通用選擇，屬性選擇器，類選擇，ID選擇，或僞類。

來源

2014-12-29 10:56:44

如果你想：

組邊框顏色爲白色的所有元素.selected之前和 .selected本身

我會建議邊框顏色默認爲白色，並改變它.selected：

div { 
 
    display: inline-block; 
 
    border: 1px solid #fff; 
 
    width: 30px; 
 
} 
 

 
div.selected ~ div { 
 
    border-color: #000; 
 
}

<div>A</div> 
 
<div>B</div> 
 
<div class="selected">C</div> 
 
<div>D</div> 
 
<div>E</div> 
 
<div>F</div> 
 
<div>G</div>

對於第二條規則：

組邊框顏色爲綠色的元素之前的.selected

如果你知道至極人會事先選擇，您可以針對元素之前nth-child()否則你將需要一些JS來選擇它。

如果.selected類是動態添加的，另一種方法是使用相同的機制（PHP，JS或其他）將類同時授予私有元素，並將CSS應用於該類。

來源

2014-12-29 11:01:59

CSS同級選擇器不能在裏面工作：not（）

回答

相關問題