加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
根据您的确切目标,有一种方法可以在不使用父选择器的情况下实现父选择器的有用性(即使存在)。。。
假设我们有:
<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元素(或其他标签)的链接。
其他回答
/*向所有子级添加样式,然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色:红色;}ul>li目标,ul>li.target~li{颜色:继承;}<ul><li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>
对于我的用例,需要更改焦点上的先前元素样式,并且悬停在父元素中只有两个项。为此,使用了:focuswithin和:hover伪类。
无论何时发生聚焦/悬停事件,都可以选择
.root元素:悬停.element到样式{background color:red;}.root元素:将焦点放在.element中,以设置样式{background color:green;}<div class=“root元素”>文本聚焦</span><input type=“text”placeholder=“type To Style”/></div>
我遇到了一个类似的问题,发现所有这类问题都可以通过以下方式解决:
给你的所有物品一种风格。为所选项目指定样式。使用+或~为下一项指定样式。
这样,您就可以设置当前项、先前项(所有项都被当前项和下一项覆盖)以及下一项的样式。
例子:
/* 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>
希望这对某人有所帮助。
我找到了最简单的解决方案。它可能只适用于你正在做的事情。
假设您想将鼠标悬停在“sibling_2”上以更改以下示例中的“sibling_1”:
<div class='parent'><div class='sibling_1'></div><div class='sibling_2'></div></div>
由于没有以前的元素选择器,您可以简单地切换“sibling_1”和“sibling_2”并应用,使它们看起来相同。
.父级{显示:柔性;弯曲方向:行反转;}
现在您可以这样选择它们。.sibling_1:悬停~.sibling_2{#您的CSS}
不,没有“上一个同级”选择器。
在一个相关的注释中,~表示一般继承兄弟(意味着元素在这个之后,但不一定紧接着),并且是一个CSS3选择器。+用于下一个兄弟姐妹,为CSS2.1。
请参阅选择器级别3中的相邻同级组合符和级联样式表级别2修订版1(CSS 2.1)规范中的5.7相邻同级选择器。