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

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


当前回答

在悬停时覆盖下一个同级的样式,这样看起来只有前一个同级在悬停时添加了样式。

ul力{颜色:红色;}ul:悬停li{颜色:蓝色;}ul:悬停li:悬停~li{颜色:红色;}<ul><li>项目1</li><li>项目2</li><li>项目3</li></ul>

其他回答

没有这样的选择器,但在DOM API中有一个非常只读的属性

Node.previousSibling节点

我解决了这个问题,将元素放在一个柔性框中,然后使用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>

没有,也有。

如果必须在输入之前放置标签,只需在输入之后放置标签,并将标签和输入保持在一个div中,并按如下方式设置div的样式:

.输入框{显示:柔性;弯曲方向:列反转;}<div class=“input box”><输入id=“电子邮件”class=“表单项”/><label for=“email”class=“表单项标题”>电子邮件*</label></div>

现在,您可以应用css中提供的标准下一个同级样式选项,并且它看起来就像您使用的是上一个同级的样式。

不。这不可能通过CSS实现。它将“级联”放在心上;-)。


然而,如果您能够将JavaScript添加到页面中,那么一点点jQuery可以帮助您实现最终目标。您可以使用jQuery的find对目标元素/class/id执行“前瞻”,然后回溯选择目标。然后使用jQuery重新编写元素的DOM(CSS)。

根据迈克·布兰特的回答,下面的jQuery片段可能会有所帮助。

$('p + ul').prev('p')

这首先选择紧跟在<p>后面的所有<ul>。然后,它“回溯”从这组<ul>s中选择所有以前的<p>s。

实际上,通过jQuery选择了“上一个兄弟姐妹”。现在,使用.css函数为该元素传递css新值。


在我的例子中,我想找到一种方法来选择一个id为#full-width的DIV,但前提是它有一个(间接的)子代DIV,其类为.companies。

我已经控制了.companies下的所有HTML,但无法更改上面的任何HTML。级联只朝着一个方向:向下。

因此,我可以选择所有#全宽。或者,我可以选择只遵循#全宽度的公司。但我不能只选择#继续的全宽度。公司。

再次,我无法在HTML中添加任何更高级别的公司。HTML的这部分是外部编写的,并封装了我们的代码。

但是使用jQuery,我可以选择所需的#全宽,然后分配适当的样式:

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

这将查找所有的#full-width.companies,并只选择那些.companie,类似于CSS中选择器用于针对标准中的特定元素的方式。然后,它使用.parents“回溯”并选择.acompany的所有父级,但是过滤这些结果以仅保留#填充宽度元素,它只选择一个full-width元素,如果它有一个.companies类后代。最后,它为结果元素分配一个新的CSS(宽度)值。

$(“.parent”).find(“.change parent”).parents(“.parint”).css(“背景色”,“深红色”);第二部分{背景色:浅蓝色;宽度:120px;高度:40px;边框:1px实心灰色;填充:5px;}.包装器{背景色:蓝色;宽度:250px;高度:165px;}.父级{背景色:绿色;宽度:200px;高度:70px;}<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><html><div class=“wrapper”><div class=“parent”>“parent”变为红色<div class=“change parent”>后代:“更改父对象”</div></div><div class=“parent”>“父级”保持绿色<div class=“nope”>后代:“nope”</div></div></div>目标<b>“<span style=“color:dark green”>父</span>”</b>将<span style=”color:red“>变为红色</span><br><b>只有当<b>具有</b>“change parent”的后代时,才</b><br><br>(反向级联,向前看,父级非后代)</html>

jQuery参考文档:$()或jQuery():DOM元素。.find:获取当前匹配元素集合中每个元素的后代,通过选择器、jQuery对象或元素进行筛选。.parents:获取匹配元素集合中每个元素的前一个同级元素。如果提供了选择器,则仅当它与该选择器匹配时,它才会检索上一个同级(过滤结果以仅包括列出的元素/选择器)。.css:为匹配元素集设置一个或多个css财产。

在悬停时覆盖下一个同级的样式,这样看起来只有前一个同级在悬停时添加了样式。

ul力{颜色:红色;}ul:悬停li{颜色:蓝色;}ul:悬停li:悬停~li{颜色:红色;}<ul><li>项目1</li><li>项目2</li><li>项目3</li></ul>