+是给下一个兄弟姐妹的。是否有与前一个相同的兄弟姐妹

您可以使用两个斧头选择器：！和

传统CSS中有两个后续的同级选择器：

+是紧接其后的同级选择器~是任何后续的同级选择器

在传统的CSS中，没有以前的同级选择器。

然而，在axe CSS后处理器库中，有两个先前的同级选择器：

? 是前一个同级选择器（与+相反）! 是之前的任何同级选择器（与~相反）

工作示例：

在以下示例中：

.any后续：hover~div选择任何后续div立即后续：hover+div选择立即后续div.任何以前的：悬停！div选择之前的任何div.上一个：悬停？div选择上一个div

第二部分{显示：内联块；宽度：60px；高度：100px；颜色：rgb（255、255、255）；背景色：rgb（255，0，0）；文本对齐：居中；垂直对齐：顶部；光标：指针；不透明度：0；过渡：不透明度0.6s缓和；}代码{显示：块；边距：4px；字体大小：24px；线条高度：24px；背景色：rgba（0、0、0和0.5）；}div：第n个类型（-n+4）{背景色：rgb（0，0，255）；}div：第n种类型（n+3）：第n个类型（-n+6）{不透明度：1；}.any后续：hover~div，.紧随其后：hover+div，.任何以前的：悬停！div中，.上一个：悬停？第二部分{不透明度：1；}<h2>将鼠标悬停在下面的任何块上</h2><div></div><div></div>＜div class=“immediate previor”＞悬停＜code＞</代码>选择器</div>＜div class=“any previous”＞悬停＜code＞</代码>选择器</div><div class=“any后续”>悬停<code>~</code>选择器</div><div class=“immediate后续”>悬停<code>+</code>选择器</div><div></div><div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>

考虑flex和grid布局的order属性。

我将在下面的示例中重点讨论flexbox，但同样的概念适用于网格。

---

使用flexbox，可以模拟以前的同级选择器。

特别是，flex order属性可以在屏幕上移动元素。

下面是一个示例：

当元素B悬停时，您希望元素A变为红色。＜ul＞<li>一个</li><li>B级</li></ul>

步骤

让ul成为一个柔性容器。ul｛display：flex；｝

---

颠倒标记中兄弟姐妹的顺序。＜ul＞<li>B级</li><li>一个</li></ul>

---

使用同级选择器以元素a为目标（~或+即可）。li：悬停+li｛背景色：红色；｝

---

使用弹性顺序属性可以恢复视觉显示上同级的顺序。li：最后一个子项｛顺序：-1；｝

---

……瞧！上一个同级选择器已诞生（或至少是模拟的）。

以下是完整代码：

上一页{显示：柔性；}li：悬停+li{背景色：红色；}李：最后一个孩子{顺序：-1；}/*非必要装饰风格*/李{高度：200px；宽度：200px；背景色：浅绿色；边距：5px；列表样式类型：无；光标：指针；}＜ul＞<li>B级</li><li>一个</li></ul>

根据flexbox规范：

5.4.显示顺序：顺序属性默认情况下，柔性项的显示和布局与源文档中显示的顺序相同。这个order属性可用于更改此排序。order属性通过将弹性项分配给序数组来控制弹性项在弹性容器中的显示顺序。它接受一个<integer>值，该值指定flex项的顺序组属于。

所有弹性项的初始订单值为0。

另请参见CSS网格布局规范中的顺序。

---

使用flex order属性创建的“以前的同级选择器”示例。

.container｛display：flex；｝.box5｛顺序：1；｝.box5:悬停+.box4｛背景颜色：橙色；字体大小：1.5em；｝.box6｛顺序：-4；｝.box7｛顺序：-3；｝.box8｛顺序：-2；｝.box9｛顺序：-1；｝.box9:hover~：not（.box12）：第n个孩子（-1n+5）{背景色：橙色；字体大小：1.5em；}.box12｛顺序：2；｝.box12:hover~：最后第n个孩子（-1n+2）{背景色：橙色；字体大小：1.5em；}.box21｛顺序：1；｝.box21:悬停~.box｛背景色：橙色；字体大小：1.5em；｝/*非必要装饰风格*/.容器{填充：5px；背景色：#888；}.box格式{高度：50px；宽度：75px；边距：5px；背景色：浅绿色；显示：柔性；对齐内容：中心；对齐项目：居中；文本对齐：居中；光标：指针；}<p>使用flex＜code＞order＜/code＞属性构造上一个同级选择器</p><div class=“container”><div class=“box box1”><span>1</span></div><div class=“box box2”><span>2</span></div><div class=“box box3”><span>3</span></div><div class=“box box5”><span>HOVER ME</span></div><div class=“box box4”><span>4</span></div></div><br><div class=“container”><div class=“box box9”><span>HOVER ME</span></div><div class=“box box12”><span>HOVER ME</span></div><div class=“box box6”><span>6</span></div><div class=“box box7”><span>7</span></div><div class=“box box8”><span>8</span></div><div class=“box box10”><span>10</span></div><div class=“box box11”><span>11</span></div></div><br><div class=“container”><div class=“box box21”><span>HOVER ME</span></div><div class=“box box13”><span>13</span></div><div class=“box box14”><14</span></div><div class=“box box15”><15</span></div><div class=“box box16”><span>16</span></div><div class=“box box17”><span>17</span></div><div class=“box box18”><span>18</span></div><div class=“box box19”><span>19</span></div><div class=“box box20”><span>20</span></div></div>

jsFiddle公司

---

附带说明——关于CSS的两个过时的信念

Flexbox打破了长期以来对CSS的信念。

一个这样的信念是，在CSS中不可能有前一个同级选择器。

如果说这种信念是普遍存在的，那就轻描淡写了。以下是关于堆栈溢出的相关问题示例：

使用选择器选择CSS中元素的前一个同级CSS：选择上一个同级CSS选择上一个同级CSS中的上一个相邻选择器悬停时选择上一个同级获取前一个同级的CSS选择器使用CSS更改悬停时同级元素的颜色如何使用selenium css语法选择上一个同级CSS选择器，用于选择在另一个元素之前出现的元素？如何仅使用CSS将样式添加到活动输入的上一个同级下一个和上一个元素的CSS选择器悬停div时如何影响其他元素

如上所述，这种观点并不完全正确。可以使用flex order属性在CSS中模拟以前的同级选择器。

z指数神话

另一个长期以来的观点是，z索引只对定位元素有效。

事实上，该规范的最新版本——W3C编辑草案——仍然认为这是正确的：

9.9.1指定堆栈级别：z索引所有物z指数值：auto||inherit初始：自动适用于：定位的图元继承：否百分比：不适用媒体：视觉计算值：按规定（添加强调）

然而，事实上，这些信息是过时和不准确的。

即使位置是静态的，作为弹性项或网格项的元素也可以创建堆叠上下文。

4.3.柔性项目Z-订购Flex项的绘制与内联块完全相同，除了使用订单修改的文档顺序代替原始文档顺序和z索引值而不是自动创建堆叠上下文，即使位置是静态的。5.4.Z轴排序：Z轴索引属性网格项的绘制顺序与内联块完全相同，除了顺序修改的文档顺序是用于代替原始文档顺序和z索引值，而不是自动创建堆叠上下文，即使位置是静态的。

下面是一个z索引在非定位弹性项上工作的演示：https://jsfiddle.net/m0wddwxs/

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

目前还没有正式的方法来做到这一点，但你可以使用一个小技巧来实现这一点！请记住，它是实验性的，并且有一些限制。。。（如果您担心导航器兼容性，请检查此链接）

您可以做的是使用CSS3选择器：名为nth-child（）的伪类

#列表>*{显示：内联块；填充：20px 28px；右边距：5px；边框：1px实心#bbb；背景：#ddd；颜色：#444；边距：0.4em 0；}#列表：第n个子项（-n+4）{颜色：#600b90；边框：1px红色虚线；背景：橙色；}<p>orange元素是使用li:nth child（-n+4）选择的上一个同级li</p><div id=“list”><span>1</span><！--将选择--><p>2</p><！--将选择--><p>3</p><！--将选择--><div>4</div><！--将选择--><div>5</div><p>6个</p><p>7个</p><p>8个</p><p>9个</p></div>

局限性

不能基于下一个元素的类选择上一个元素伪类也是如此

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

假设我们有：

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

这是类似问题的链接

CSS选择所有以前的兄弟姐妹以获得星级

因此，我使用每个人的回答来发布我的解决方案，任何人都可以将其作为参考，并可能提出改进建议。

//仅用于检查输入值//Consts公司const starRadios=document.querySelectorAll（'input[name=“rating”]'）；//事件监听器starRadios.forEach（（radio）=>radio.addEventListener（'change'，getStarRadioValue））；//获取星形无线电值函数getStarRadioValue（事件）｛警报（event.target.value）//用它做点什么};.星级{字体大小：1.5rem；unicode bidi：bidi覆盖；方向：rtl；文本对齐：左侧；}.star-rating.editable标签：悬停{光标：指针；}.star-rating.editable.icon星形：悬停，.star-rating.editable.icon星形：悬停~.icon星形{背景色：#fb2727！重要的}.icon星形{位置：相对；背景色：#72747d；宽度：32px；高度：32px；显示：内联块；过渡：背景色0.3s；}.icon-star填充{背景色：#fb2727；}.icon星形>标签{显示：内联块；宽度：100%；高度：100%；左：0；顶部：0；位置：绝对；}.icon star>标签>输入[类型=“radio”]{位置：绝对；顶部：0；左：0；变换：translateY（50%）translateX（50%）；显示：无；}<div class=“星级可编辑”><span class=“icon star”><标签><input type=“radio”name=“rating”value=“5”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“4”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“3”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“2”/></label></span><span class=“icon star”><标签><input type=“radio”name=“rating”value=“1”/></label></span></div>