加号选择器(+)用于选择下一个相邻同级。

前一个兄弟姐妹是否有同等的?


当前回答

/*向所有子级添加样式,然后撤消目标的样式以及你目标的兄弟姐妹*/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中提供的标准下一个同级样式选项,并且它看起来就像您使用的是上一个同级的样式。