在当前div之前将CSS应用于容器中的所有div

Question

假设我们有这个布局：

<div id="container">

    <div></div>
    <div></div>
    <div class="current"></div>
    <div></div>
    <div></div>

</div>

通过一些CSS样式：

#container div {
  width: 20px;
  height: 20px;
}

如何使所有在 #container 中具有 class="current" 的 div ，以及它们之前的 div，都具有相同的背景颜色，例如 background: tomato;？如果 class="current" 的 div 发生更改，该背景颜色也应更新。

因此，在上面的示例中，容器中的前3个 div 将具有番茄色的背景颜色。

- user5589998

---

不知道你所指的前面的div是兄弟还是父元素，这个问题几乎无法回答。 - Brian Ellis

Answer 1

您可以使用 通用兄弟选择器。

#container div {
  width: 20px;
  height: 20px;
  
  background-color:tomato;
}

#container .current ~ div {
  background-color:transparent;
}

<div id="container">

    <div>1</div>
    <div>2</div>
    <div class="current">3</div>
    <div>4</div>
    <div>5</div>

</div>

- Marcelo

---

真不错！仅使用CSS，甚至不知道这是可能的。 - HaukurHaf

@CupawnTae 答案已经被编辑过了，但最初的问题中并没有声明要选择哪些具体的 div。只是需要选择之前的 div。 - Brian Ellis

@Marcelo 如果有多个容器，比如在这个容器之前还有一个具有相同布局的容器...你会如何使得所有在那个容器中的div也拥有背景颜色（因为它们在当前类之前）？ - user5589998

Answer 2

这里提供了一种不同的解决方法

http://jsfiddle.net/27LjLqm2/

<div id="container">

<div>1</div>
<div>2</div>
<div class="current">3</div>
<div>4</div>
<div>5</div>

</div>


#container div {
width: 20px;
height: 20px;
background:tomato;
}

#container div:nth-last-child(-n+2){
background:transparent;
}

我们的目标是列表中的最后一个DIV。

"-n" 位于第5个div下面，所以+2会让我们向上移动两次。

使用"+1"将使"div 5"的背景透明。

"+2"将从"div 5到div 4"全部遍历并使它们的背景透明。

您可以尝试使用+3和+4来查看哪些内容被更改。

- Gad

---

需要根据哪个 current 类被应用于 div 来进行更改。 - CupawnTae

“-n” 的使用在哪里有记录？它与哪些浏览器兼容？ - RockPaperLz- Mask it or Casket

@RockPaperLizard 一分钟。 - Gad

我刚在Firefox中测试了它，那里可以运行。我正在尝试在规格中找到“n”。如果您能为我指出一些相关文档，那就太棒了。 - RockPaperLz- Mask it or Casket

我还没有点击那个链接……那个源合法吗？在实际的 CSS 规范中呢？它一定在规范中的某个地方，但我可能在寻找错误的部分。 - RockPaperLz- Mask it or Casket

链接指向的是一本我自己拥有的电子书。我不确定它是否合法，所以我把它删除了。 了解这方面最好的方法是从w3c.com开始阅读类型选择器，所有规范都会被讨论，包括nth-of-type、nth-child、nth-last-child等，并提供简单的示例。 这是链接：http://www.w3schools.com/cssref/sel_nth-child.asp - Gad

Answer 3

当你在使用jQuery时，如果你需要使用.prevAll('div')，你需要打上Jquery标签。

$(document).ready(function(){
    $('.current').prevAll('div').css('background','tomato');
});

并且您要求前三个div

$(document).ready(function(){
    $('.current').css('background','tomato').prevAll('div').css('background','tomato');
});

演示

- Mohamed-Yousef

---

他在哪里说他需要CSS解决方案？该问题的标签还包括Javascript和jQuery。如果我理解OP正确的话，甚至没有CSS-only的解决方案来解决这个问题。 - HaukurHaf

我的错误，因为他从未提到过任何其他语言，而且他的问题实际上缺少了很多信息，我没有想到JS是一个可能的解决方案。但即使使用JS，在这里问题也相当模糊，因为他的目标不在所述元素之外。 - Brian Ellis

谢谢，太完美了！我对这些语言还很陌生，所以不确定哪种语言能提供解决方案 - 对任何困惑感到抱歉！ - user5589998

好吧，他确实说过“如果class="current"所在的div更改，则更新”，但这个代码没有做到（PS：我没有投反对票 :-)） - CupawnTae

感谢提供 jQuery 解决方案，毕竟它被标记为 jQuery，因此完整性很好，这样任何查看此内容的人都可以看到所有可能的解决方案。 - jaggedsoft

Answer 4

#container div:not(.current ~ div) {
    background: red;
} 

也有良好的浏览器支持

- seldon