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

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


当前回答

没有“前一选择器”,但可以使用: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,或者使用相反的顺序更直接。

其他回答

虽然没有以前的CSS选择器。我找到了一个快速而简单的方法来自己选择一个。以下是HTML标记:

<div class="parent">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

在JavaScript中,只需执行以下操作:

document.querySelector(".child-2").parentElement.querySelector(".child-1")

这将首先选择父div,然后从child-2 div中选择child-1 div。

如果您使用jQuery,只需执行以下操作:

$(".child-2").prev()

根据您的确切目标,有一种方法可以在不使用父选择器的情况下实现父选择器的有用性(即使存在)。。。

假设我们有:

<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元素(或其他标签)的链接。

对于我的用例,需要更改焦点上的先前元素样式,并且悬停在父元素中只有两个项。为此,使用了:focuswithin和:hover伪类。

无论何时发生聚焦/悬停事件,都可以选择

.root元素:悬停.element到样式{background color:red;}.root元素:将焦点放在.element中,以设置样式{background color:green;}<div class=“root元素”>文本聚焦</span><input type=“text”placeholder=“type To Style”/></div>

我找到了最简单的解决方案。它可能只适用于你正在做的事情。

假设您想将鼠标悬停在“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}

不。这不可能通过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财产。