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之前包括div（current之内）之前的所有div都具有相同的背景颜色，例如background: tomato;？并更新class="current"所在的div是否会发生变化？

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

Answer 1

您可以使用general sibling selector。

＆＃13;

#container div {
  width: 20px;
  height: 20px;
  
  background-color:tomato;
}

#container .current ~ div {
  background-color:transparent;
}

＆＃13;

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

＆＃13;

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

＆＃34; -n＆＃34;在第5分区之下，所以+2将使我们两次登顶。

使用＆＃34; + 1＆＃34;会使＆＃34; div 5＆＃34;背景透明。

+2会从＆＃34; div 5到div 4＆＃34;并使他们的背景透明。

你可以使用+3然后+4来看看它有什么变化

Answer 3

当您在jQuery中标记Jquery ..时，您需要使用。prevAll（＆＃39; div＆＃39;）

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

你要求前3个div

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

Demo

Answer 4

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

Good browser support, too

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

4 个答案: