加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
另一种flexbox解决方案
您可以使用与HTML中元素的顺序相反的方式。然后除了使用Michael_B的答案中的顺序外,还可以使用灵活的方向:行反转;或弯曲方向:列反转;这取决于您的布局。
工作样本:
.flex弯曲{显示:柔性;弯曲方向:行反转;/*在“反转”结尾(即开头)对齐内容*/调整内容:柔性端;}/*在悬停目标上,其“先前”元素*/.flex项:悬停~.flex项{背景色:石灰;}/*仅用于演示的样式*/.flex项目{背景色:橙色;颜色:白色;填充:20px;字体大小:3rem;边界半径:50%;}<div class=“flex”><div class=“flex item”>5</div><div class=“flex item”>4</div><div class=“flex item”>3</div><div class=“flex item”>2</div><div class=“flex item”>1</div></div>
其他回答
如果您知道确切的位置,那么基于:nth-child()的排除以下所有兄弟姐妹将起作用。
ul li:not(:nth-child(n+3))
这将选择第三个之前的所有lis(例如第一个和第二个)。但是,在我看来,这看起来很难看,而且用例非常紧凑。
您还可以从右到左选择第n个子项:
ul li:nth-child(-n+2)
这也是一样的。
没有这样的选择器,但在DOM API中有一个非常只读的属性
Node.previousSibling节点
三个技巧:基本上,颠倒HTML中元素的HTML顺序,并使用~Next同级运算符:
1.使用CSS Flex和行反转
.反向{显示:内联flex;弯曲方向:行反转;}.reverse span:hover~span{/*在span悬停时,将其“先前”元素作为目标*/背景:金色;}将光标悬停在SPAN上,可以看到前面正在设置样式的元素<br><div class=“reverse”><!-- 反转内部元素的顺序--><span>5个</span><span>4个</span><span>3个</span><span>2个</span><span>1个</span></div>
2.使用方向为RTL的Flex
.反向{显示:内联flex;方向:rtl;}.reverse span:hover~span{/*在span悬停时,将其“先前”元素作为目标*/背景:红色;}将光标悬停在SPAN上,可以看到前面正在设置样式的元素<br><div class=“reverse”><!-- 反转内部元素的顺序--><span>5个</span><span>4个</span><span>3个</span><span>2个</span><span>1个</span></div>
3.使用浮动右侧
反向{显示:内联块;}.反向跨度{浮动:右侧;}.reverse span:hover~span{/*在span悬停时,将其“先前”元素作为目标*/背景:红色;}将光标悬停在SPAN上,可以看到前面正在设置样式的元素<br><div class=“reverse”><!-- 反转内部元素的顺序--><span>5个</span><span>4个</span><span>3个</span><span>2个</span><span>1个</span></div>
不,没有“上一个同级”选择器。
在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。
请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。
我遇到了一个类似的问题,发现所有这类问题都可以通过以下方式解决:
给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。
这样,您就可以设置当前项、先前项(所有项都被当前项和下一项覆盖)以及下一项的样式。
例子:
/* all items (will be styled as previous) */
li {
color: blue;
}
/* the item i want to distinguish */
li.milk {
color: red;
}
/* next items */
li ~ li {
color: green;
}
<ul>
<li>Tea</li>
<li class="milk">Milk</li>
<li>Juice</li>
<li>others</li>
</ul>
希望这对某人有所帮助。