Css 相邻同级选择器的对立面?

Css 相邻同级选择器的对立面?,css,css-selectors,Css,Css Selectors,请检查这把小提琴-。我需要编写选择器来选择活动元素之后的元素和活动元素之前的元素。前一部分似乎不起作用。如何选择a.active之前的元素?相邻同级选择器只向前看,而不是向后看。以前相邻的兄弟姐妹没有-组合子 如果您只需要选择在同一父级中不处于活动状态的任何内容,并且您不介意稍微减少浏览器支持,则可以使用:not代替。如果需要为.active之后的样式指定其他样式,则需要替代: a:not(.active) { background:red } a.active + a { background

请检查这把小提琴-。我需要编写选择器来选择活动元素之后的元素和活动元素之前的元素。前一部分似乎不起作用。如何选择a.active之前的元素?

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

如果您只需要选择在同一父级中不处于活动状态的任何内容,并且您不介意稍微减少浏览器支持,则可以使用:not代替。如果需要为.active之后的样式指定其他样式,则需要替代:

a:not(.active) { background:red }
a.active + a { background:yellow }
同样,这假设它们总是共享同一个父对象


正如BoltClock所说,在当今的浏览器中,这是不可能的。 然而,我相信这在CSS中是可能的

具体语法见语法E!+F表示元素E在元素F之前


因此,在您的情况下,语法将是!+a、 active表示标记为a的元素位于标记为a且类为active的元素之前。从今天起,这是

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

a.active ~ a { background:red }

我不得不说,这是我有一段时间的问题,我不太喜欢的事情之一最终解决了这个问题。。。浮球:对

在我的例子中,是input[type='radio']+label元素,由于CSS向前而不是向后流动,~input[type='radio']+label将选择选中元素后的所有同级

因为,float:right负责获取A,B,C,并将它们定位为C,B,A-I在HTML中将radio元素的顺序从1-6更改为6-1,并使用CSS使它们float:right

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

现在,当我使用~input[type='radio']+label时,它仍然以与我的情况相同的方式定义样式,即标签的颜色,然而,正在设置样式的兄弟姐妹现在在视觉上与前面的兄弟姐妹相同


这个帖子已经有一年多的历史了,但是如果有人需要一个例子,我会创建一支钢笔,如果有人要求的话,我会发一支钢笔。

我一直在寻找相同的解决方案,以.activelink后面的元素为目标

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

a、 活动{背景:ccc;} a、 活动~*{背景:黄色} a{背景:红色}

演示:


这对我很有效,希望能有所帮助。

要将相同的规则应用于前后的元素,请使用!+a、 我想这已经从草稿中删除了。CSS是级联的。。。!尚未在任何位置实现的替换将是a:not:has+a。此处是活动的,其中包括浏览器支持表和。在当前支持的CSS中,无法选择向后或向上。只能选择向前和向下。选择向后或向上需要JavaScript或jQuery。或者,浮点数:在通过HTML反转元素布局之后。请阅读下面我的答案以了解更多信息。因为即使在与+完全相同的示例中,这也只能在您知道文档的同一“级别”中将有定义良好的项时才能起作用。例如,如果您有一个h1和一个h2,并且您知道其中只有0或1个,那么这可以很好地工作`即使在提供的示例中,Vixed的答案也不起作用。Simon_Weaver的回答仅在特定情况下有效,即类为.active的节点后有下一个兄弟节点。如果没有下一个兄弟姐妹,整个过程就会停止,因此答案也是错误的。唯一正确的答案是:目前在CSS中无法实现这一点。