相邻兄弟选择器的对面？

Question

请检查这个小提琴 - http://jsfiddle.net/vfMsS/.我需要编写选择器,选择"active"元素之后的元素和它之前的元素."之前"部分似乎不起作用.如何选择之前的元素a.active？

Answer 1

就像BoltClock说的那样,在当今的浏览器中没有办法实现这一点.但是,我相信它在CSS中是可能的.

的CSS选择4级语法(具体见本)的语法E! + F对"一个元件F前述的元件E".

因此,在您的情况下,语法将a! + a.active意味着"带有标记的元素,前面的元素具有标记a和类活动".截至今天,这尚未在任何布局引擎中实现

Answer 2

相邻的兄弟选择器只向前看，而不是向后看。-之前的相邻兄弟姐妹没有组合子。

如果您只需要选择不在.active同一个父级中的任何内容，并且不介意稍微减少浏览器支持，则可以:not()改用。如果您需要为 之后的样式指定不同的样式，则.active需要覆盖：

a:not(.active) { background:red }
a.active + a { background:yellow }

同样，这假设它们始终共享同一个父级。

jsFiddle 预览