Question

<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

      .test {
            background: #ff4040;
            color: #fff;
            display: block;
            font-size: 15px;
      }

大家好，我需要使用CSS或简单的JavaScript从最后三个div中删除背景色。条件是我只需要删除最后三个div中的样式，我们使用多少个div无关紧要，几乎所有浏览器都应支持它。你们可以帮我吗？

Answer 1

一个简单的解决方案。

您可以使用选择最后一个3div。

.test:nth-last-child(-n+3) {
    /*declarations*/
}

Answer 2

尝试：nth-last-child（-n + 3）选择器。

来源：https://www.w3schools.com/cssref/sel_nth-last-child.asp
https://css-tricks.com/almanac/selectors/n/nth-last-child/

Answer 3

仅使用CSS，如果您要在第三个之后选择全部

  .test:nth-child(n+3) {
        background: none;
  }

https://www.w3schools.com/cssref/sel_nth-child.asp

Answer 4

使用JavaScript：

[...document.querySelectorAll('.test')]
  .splice(-3)
  .forEach(el => el.classList.remove('test'));

.test {
  background: #ff4040;
  color: #fff;
  display: block;
  font-size: 15px;
}

<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

Answer 5

不是最漂亮的方式，但是就像一个魅力。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
    .test {
    background: #ff4040;
    color: #fff;
    display: block;
    font-size: 15px;
    }
</style>

<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

<script>
    $(document).ready(function(){
        let $count = $('.test').length;
        let i = 0;
        $('.test').each(function(key,val){
            if(i == Number($count - 3) || i == Number($count - 2) || i == Number($count - 1)){
                $(val).css({'background':'none','color':'black'});
            }
            i++;
        });
    });
</script>

Answer 6

这将为您服务，

.test:not(:nth-child(-n+3)) {
    background: #ff4040;
    color: #fff;
    display: block;
    font-size: 15px;
}

<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

Answer 7

在这里，我创建了另一个CSS类来更改样式，在这种情况下，只需删除背景颜色即可。

每次使用新的类并删除旧的类时，我都会使用JavaScript对该类的最后一个元素进行3次迭代。

let element = document.getElementsByClassName("test");
let elementsToRemoveBg = 3;
while (elementsToRemoveBg--){
  element[element.length-1].classList.add("test-no-bg");
  element[element.length-1].classList.remove("test");
}

.test {
  background: #ff4040;
  color: #fff;
  display: block;
  font-size: 15px;
}
.test-no-bg {
  color: #fff;
  display: block;
  font-size: 15px;
}

<div class="test"> one </div>
<div class="test"> two </div>
<div class="test"> three </div>
<div class="test"> four </div>
<div class="test"> five </div>
<div class="test"> six </div>

Answer 8

一个简单的解决方案。如果要删除更多内容，可以将其作为循环。

     var e=document.querySelectorAll('.test');

for(var i=1;i<=3;i++)
{
e[e.length-i].classList.remove('test')
}

Answer 9

最好使用以下代码，这样可以减少行数。不需要为最后三个元素编写单独的CSS代码。

    body .test:not(:nth-last-child(-n+3)) {
        background: #ff4040;
        color: #fff;
        display: block;
        font-size: 15px;
  }

JavaScript-移除样式

9 个答案: