JavaScript - 移除样式

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，它都应该在几乎所有浏览器中支持。

- Bst_coder

---

我的回答有帮到你吗，兄弟？ - Thanveer Shah

Answer 1

一个简单的解决方案。

您可以使用以下方法选择最后3个div。

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

- Thanveer Shah

---

只要.test元素是兄弟元素，这个就能正常工作。 - Salman A

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/

- Marlaqk

---

嘿，Marlaqk，我认为nth child属性在这里不起作用。我需要从最后3个div中删除样式。无论我们使用多少个div，我们的脚本或css都应该只影响最后3个div。 - Bst_coder

或者我们可以为每个div添加单独的类，并编写JavaScript代码来从最后三个div中删除此单独的类。但我不知道如何做到这一点。 - Bst_coder

Answer 3

使用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>

- Yosvel Quintero

Answer 4

这对你来说是可行的，

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

- Aishwarya

---

他想要最后3个div，不是前面的3个。 - Thanveer Shah

Answer 5

在这里，我创建了另一个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>

- holydragon

Answer 6

只使用CSS，如果您想选择第三个之后的所有内容

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

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

- venimus

Answer 7

虽然不是最漂亮的实现方式，但效果非常好。

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

- Jaapaap

---

谢谢Jaapaap，你能否在这段代码中再加入一个功能？ - Bst_coder

我将为每个div添加单独的类，并且需要从最后一行中放置的div中删除该类。它可能是三个div，两个div或一个div。 - Bst_coder

@Bst_coder 发送一个带有 HTML 的 jsfiddle，我会看看我能做什么 :) - Jaapaap

Answer 8

一个简单的解决方案。如果你想要移除更多，可以使用循环。

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

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

- ellipsis

Answer 9

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

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

- John_ny