选择元素之前的所有元素与类？ [英] Select all elements before element with class?

问题描述

在CSS中，可以选择具有给定类的元素之前的所有元素？示例HTML：

 < DIV> 
< a href> One< / a> 
< a href>两个< / a> 
< a href>三< / a> 
< a href class =active> Four< / a> 
< a href> Five< / a> 
< / div> 
  

和CSS：

  .active：（all-before）{
 border-left：solid 1px＃C0FFEE; 
} 
  

因此，链接'One'，'Two'和'Three'会有一个左边界，但'四'和'五'不会。

=jsdata-hide =false>

a {text-装饰：无; border-left：1px solid black;} a.active，a.active〜* {border：none;}

 < div> < a href> One< / a> < a href>两个< / a> < a href>三< / a> < a href class =active> Four< / a> < a href> Five< / a>< / div>  

In CSS is it possible to select all elements before an element with a given class?

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

And CSS:

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

So links 'One', 'Two', and 'Three' would would have a left border but 'Four' and 'Five' would not.

解决方案

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>

这篇关于选择元素之前的所有元素与类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！