CSS兄弟选择器在内部不起作用：not（）

Question

我知道使用纯CSS时，不可能选择元素的先前兄弟。但我试图用复杂的选择器欺骗浏览器 请参阅此jsFiddle。它包含几个可以正常工作的CSS规则，除了其中两个：

//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()兄弟选择器~内部不起作用 所以有两个问题：

1. 预期~ :not()内的{{1}}不起作用吗？
2. 这种情况有解决办法吗？

修改
最后的想法是用纯CSS制作漂亮的悬停效果，如：
悬停的图像只是缩放，右边的图像可以很容易地找到并设置样式但左边的图像... div的例子只是一个例子。

Answer 1

:not()伪类不能包含兄弟选择器。

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

  

否定伪类，不是（X），是一个功能符号，它将简单选择器（不包括否定伪类本身）作为参数。

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

  

简单选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

Answer 2

如果你想：

  

在.selected之前为所有元素设置边框颜色为白色   .selected本身

我建议将边框颜色默认为白色并在.selected之后更改它：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

对于第二条规则：

  

将.selected

之前的元素的边框颜色设置为绿色

如果您知道将提前选择一个，您可以使用nth-child()之前定位元素，否则您将需要一些JS来选择它。

如果动态添加.selected类，另一种方法是使用相同的机制（PHP，JS或其他）同时为一个类提供一个类，并将CSS应用于该类。