Question

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

Answer 1

就像BoltClock所说，在当今的浏览器中没有办法实现这一点。但是，我相信它可以在CSS中使用。

CSS Selectors level 4语法（具体见this），语法为E! + F，表示“元素F前面的元素E”。

因此，在您的情况下，语法将是a! + a.active，意思是“带有标记的元素，前面的元素具有标记a和类活动”。截至今天，这是not yet implemented in any layout engine

Answer 2

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

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

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

同样，这假设他们总是共享同一个父母。

jsFiddle preview

Answer 3

Why don't you try using a sibling combinator?

a.active ~ a { background:red }

http://jsfiddle.net/VixedS/6x7d9vm7/

Answer 4

我不得不说，这是我暂时遇到的一个问题，其中一件我没有做过的事情最终解决了这个问题...... float: right。

在我的情况下，它是input[type='radio'] + label元素，并且由于CSS向前流动而不是向后流动，~ input[type='radio'] + label将选择被检查元素之后的所有兄弟元素。

因为，float: right负责采取＆＃34; A，B，C＆＃34;并将它们定位为＆＃34; C，B，A＆＃34; - 我在HTML中将无线电元素的顺序从1-6更改为6-1，并使用CSS将它们float: right。

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

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

这个帖子已经有一年多了，但是如果有人需要一个例子，如果被问到，我会创建并发布一支笔。

Answer 5

我一直在寻找针对public void Shuffle_b(Deck deck) { Deck temp_deck = deck; Deck x = new Deck(); x.Cards.Clear(); Deck y = x; Deck z = y; while (temp_deck.Cards.Count !=0) { if (temp_deck.Cards.Count != 0) { x.Cards.Add(temp_deck.Cards[0]); temp_deck.Cards.Remove(temp_deck.Cards[0]); if (temp_deck.Cards.Count != 0) { y.Cards.Add(temp_deck.Cards[0]); temp_deck.Cards.Remove(temp_deck.Cards[0]); if (temp_deck.Cards.Count != 0) { z.Cards.Add(temp_deck.Cards[0]); temp_deck.Cards.Remove(temp_deck.Cards[0]); } } } } }链接

后面的元素的解决方案

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

.active

演示：https://codepen.io/ramiro-ruiz/pen/gBOPQL

对我有用，希望对您有所帮助。

相邻兄弟选择器的对面？

5 个答案: