选择具有特定类名的元素之前的所有元素？

Question

在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;
}

因此，链接“一”、“二”和“三”将有左边框，但“四”和“五”不会。

- saricden

Answer 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>

- Chris Burton

Answer 2

好的。真正起作用的是将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>

- Paul Lucius Valor

Answer 3

一个更简单的解决方案，首先使用 .active ~ a, .active 选择具有类 .active 的 </a> 元素和其后的 </a> 元素，然后将其放入 :not() 伪类中的 </a> 标签上，a:not(.active ~ a, .active) 这将选择除了具有类 .active 和其后的 </a> 元素之外的所有 </a> 元素。

a {
  text-decoration: none;
  color: black;
}

a:not(.active ~ a, .active) {
  border-left: 1px solid red
}

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

- HASSAN EL JEBYLY

Answer 4

Baraa Al-Tabbaa的回答有一个缺点，即所有其他元素的值都将设置为none。

为了避免这种情况，您可以使用多个: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>

- toaruScar

Answer 5

通常情况下不可能，但你可以以某种方式进行黑客攻击。

例如，如果你想要做到这一点：

.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作为另一种解决方案。

- Baraa Al-Tabbaa