加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
选择器级别4建议:has()(以前是主题指示符!),有一天,它将允许您选择前一个兄弟姐妹:
previous:has(+ next) {}
或(对于一般上一个兄弟姐妹而不是相邻兄弟姐妹):
previous:has(~ next) {}
在撰写本文时:has{}被大多数但不是所有主要浏览器支持。支持正在改善。
多年来,这个答案吸引了数十条“仍然不支持”的评论(现已删除)。请不要再添加了。答案中有一个指向定期更新的浏览器支持图表的链接。
其他回答
没有,也有。
如果必须在输入之前放置标签,只需在输入之后放置标签,并将标签和输入保持在一个div中,并按如下方式设置div的样式:
.输入框{显示:柔性;弯曲方向:列反转;}<div class=“input box”><输入id=“电子邮件”class=“表单项”/><label for=“email”class=“表单项标题”>电子邮件*</label></div>
现在,您可以应用css中提供的标准下一个同级样式选项,并且它看起来就像您使用的是上一个同级的样式。
/*向所有子级添加样式,然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色:红色;}ul>li目标,ul>li.target~li{颜色:继承;}<ul><li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>
没有“前一选择器”,但可以使用:not和~(“后选择器”)的组合。没有逆序,没有javascript。
.父级a{颜色:蓝色}.父项a.活动{颜色:红色}.parent a:不是(.parent a.active~a){颜色:红色}<div class=“parent”><a href=“”>链接</a><a href=“”>链接</a><a href=“”class=“active”>链接</a><a href=“”>链接</a><a href=“”>链接</a></div>
我认为我的方法比“设置所有div的样式,而不是删除div之后的样式”,或者使用javascript,或者使用相反的顺序更直接。
三个技巧:基本上,颠倒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>
根据您的确切目标,有一种方法可以在不使用父选择器的情况下实现父选择器的有用性(即使存在)。。。
假设我们有:
<div>
<ul>
<li><a>Pants</a></li>
<li><a>Socks</a></li>
<ul>
<li><a>White socks</a></li>
<li><a>Blue socks</a></li>
</ul>
</ul>
</div>
我们可以做什么来使用间距使袜子块(包括袜子颜色)在视觉上突出?
什么会很好,但不存在:
ul li ul:parent {
margin-top: 15px;
margin-bottom: 15px;
}
存在的内容:
li > a {
margin-top: 15px;
display: block;
}
li > a:only-child {
margin-top: 0px;
}
这将所有锚链接设置为顶部有15px的边距,并将其重置为0,以用于LI中没有UL元素(或其他标签)的链接。