选择具有类的元素之前的所有元素？答案

【问题标题】：Select all elements before element with class?选择具有类的元素之前的所有元素？
【发布时间】：2015-01-18 04:58:26
【问题描述】：

在 CSS 中是否可以选择具有给定类的元素之前的所有元素？

示例 HTML：

<div>
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
    <a href class="active">Four</a>
    <a href>Five</a>
</div>

还有 CSS：

.active:(all-before) {
    border-left: solid 1px #C0FFEE;
}

所以链接“一”、“二”和“三”会有左边框，但“四”和“五”没有。

【问题讨论】：

标签： html css

【解决方案1】：

a {
  text-decoration: none;
  border-left: 1px solid black;
}

a.active, a.active ~ * {
  border: none;
}

<div>
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
    <a href class="active">Four</a>
    <a href>Five</a>
</div>

【讨论】：

如果没有 active 标记的元素，它会“选择”所有内容...

【解决方案2】：

Baraa Al-Tabbaa's answer 的缺点是所有其他元素的值都将设置为无。

为避免这种情况，您可以使用多个 :not 选择器，因此其余元素仍然可以继承父级的属性。

a:not(a.active ~ a):not(a.active) {
  border-left: solid 5px #C0FFEE;
}

<div>
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
    <a href class="active">Four</a>
    <a href>Five</a>
</div>

【讨论】：

【解决方案3】：

好的。真正起作用的是flex-direction 与~ 选择器结合使用。

.container {
  display: flex;
  /* could also be column-reverse*/
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.item {
  /* just styling */
  margin: 0 8px;
  border: 1px solid gray;
  border-radius: 3px;
  padding: 4px 8px;
  transition: all .1s ease-in-out;
}

/* we are still selecting every element after according to HTML
 * but as they have reversed order, we're applying styles to all
 * elements that were rendered before */
.item:hover ~ .item {
  color: coral;
  border-color: coral;
}

<div class="container">
  <!-- notice how children are ordered in reverse direction -->
  <div class="item">Third</div>
  <div class="item">Second</div>
  <div class="item">First</div>
</div>

【讨论】：

【解决方案4】：

嗯，通常这是不可能的，但你可以通过某种方式破解它。

例如，如果你想这样做：

.active:(all-before) {
    border-left: solid 1px #C0FFEE;
}

那么你可以这样做：

a {
    border-left: solid 1px #C0FFEE;
}
a.active, a.active~a {
    border-left: none;
}

所以你把你想要的样式放在第一个选择器中，然后在第二个选择器中禁用该设计。

工作示例：http://jsfiddle.net/prrd14u2/

您也可以使用 javascript、jquery 作为另一种解决方案。

【讨论】：