加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
加号选择器(+)用于选择下一个相邻同级。
前一个兄弟姐妹是否有同等的?
当前回答
/*向所有子级添加样式,然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色:红色;}ul>li目标,ul>li.target~li{颜色:继承;}<ul><li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>
其他回答
/*向所有子级添加样式,然后撤消目标的样式以及你目标的兄弟姐妹*/ul>li{颜色:红色;}ul>li目标,ul>li.target~li{颜色:继承;}<ul><li>之前</li><li class=“target”>目标</li><li>之后</li><li>之后</li></ul>
可以按如下方式使用:has()。
.thePrevious:has(+ .theNextSibling)
我使用它来修复重叠的引导模式,如下所示。如果有多个模态,则之前的模态将被隐藏。
.modal.show.modal--open:has(~ .modal.show.modal--open){
opacity: 0;
}
我解决了这个问题,将元素放在一个柔性框中,然后使用flex direction:column reverse。
然后,我不得不手动反转HTML中的元素(以相反的顺序排列),这看起来很正常,而且很有效!
<div style="display: flex; flex-direction: column-reverse">
<a class="element2">Element 2</a>
<a class="element1">Element 1</a>
</div>
...
<style>
.element2:hover + element1 {
...
}
</style>
不幸的是,没有“上一个”同级选择器,但您仍然可以通过使用定位(例如向右浮动)获得相同的效果。这取决于你想做什么。
在我的情况下,我想要一个主要的CSS五星评级系统。我需要为之前的星星上色(或更换图标)。通过将每个元素向右浮动,我基本上得到了相同的效果(因此,星星的html必须写为“向后”)。
我在本例中使用FontAwesome,并在fa-star-o和fa-star的unicode之间进行交换http://fortawesome.github.io/Font-Awesome/
CSS:
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* set all stars to 'empty star' */
.stars-container {
display: inline-block;
}
/* set all stars to 'empty star' */
.stars-container .star {
float: right;
display: inline-block;
padding: 2px;
color: orange;
cursor: pointer;
}
.stars-container .star:before {
content: "\f006"; /* fontAwesome empty star code */
}
/* set hovered star to 'filled star' */
.star:hover:before{
content: "\f005"; /* fontAwesome filled star code */
}
/* set all stars after hovered to'filled star'
** it will appear that it selects all after due to positioning */
.star:hover ~ .star:before {
content: "\f005"; /* fontAwesome filled star code */
}
HTML格式:(40)
JSFiddle:http://jsfiddle.net/andrewleyva/88j0105g/
没有,也有。
如果必须在输入之前放置标签,只需在输入之后放置标签,并将标签和输入保持在一个div中,并按如下方式设置div的样式:
.输入框{显示:柔性;弯曲方向:列反转;}<div class=“input box”><输入id=“电子邮件”class=“表单项”/><label for=“email”class=“表单项标题”>电子邮件*</label></div>
现在,您可以应用css中提供的标准下一个同级样式选项,并且它看起来就像您使用的是上一个同级的样式。