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

所以链接＆＃39; One＆＃39;，＆＃39; Two＆＃39;和＆＃39; Three＆＃39;会有一个左边界，但是四个＆＃39;和＆＃39;五＆＃39;不会。

Answer 1

＆＃13;

a {
  text-decoration: none;
  border-left: 1px solid black;
}

a.active, a.active ~ * {
  border: none;
}

＆＃13;

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

＆＃13;

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>

Answer 3

嗯，通常情况下这是不可能的，但你可以将其破解。

例如，如果你想这样做：

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

Answer 4

Baraa Al-Tabbaa's answer 有一个缺点，即所有其他元素的值都将设置为 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>

选择元素之前的所有元素与类？

4 个答案: