css - 与相邻兄弟选择器相反？

Question

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

score 7 · Accepted Answer

就像 BoltClock 说的那样，在当今的浏览器中没有办法做到这一点。但是，我相信这在 CSS 中是可能的。

CSS 选择器第 4 级语法（具体参见this），语法E! + F为“一个元素 E 在元素 F 之前”。

因此，在您的情况下，语法的a! + a.active含义是“带有标签 a 的元素在带有标签 a 且类处于活动状态的元素之前”。到今天为止，这还没有在任何布局引擎中实现

score 5 · Accepted Answer

相邻兄弟选择器只向前看，不向后看。以前的相邻兄弟没有-组合子。

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

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

同样，这假设它们总是共享同一个父级。

score 1 · Accepted Answer

我正在寻找相同的解决方案来定位.active链接背后的元素

我为之前的任何元素设置了默认样式，.active然后使用兄弟选择器选择了该元素之后的所有元素。

a.active { background: #ccc;} a.active ~ * { background: yellow } a { background: red }

这对我有用，希望它有帮助。

score 0 · Accepted Answer

我不得不说，这是我有一段时间的问题，而我不太喜欢的一件事最终解决了这个问题float: right......。

在我的例子中，它是input[type='radio'] + label元素，并且由于 CSS 向前流动而不是向后流动，~ input[type='radio'] + label因此会在检查的元素之后选择所有兄弟姐妹。

因为，float: right负责获取“A、B、C”并将它们定位为“C、B、A”——我将 HTML 中单选元素的顺序从 1-6 更改为 6-1，并float: right使用 CSS 制作它们。

这样做是在渲染到浏览器时将它们反转回 1-6 的顺序。

现在，当我使用时~ input[type='radio'] + label，它仍然以相同的方式定义样式（在我的情况下，它是标签的颜色），但是，现在被样式化的兄弟姐妹 - 在视觉上 - 前面的那些。

该线程已有一年多的历史，但如果有人需要示例，如果被问到，我会创建并发布一支笔。

score 0 · Accepted Answer

你为什么不尝试使用兄弟组合器？

a.active ~ a { background:red }

5 回答 5