Question

我只想更改<div>的{{1}}和id的{{1}}的背景色。.如何做这种事情（注意，则childDiv1的列表可能是一个庞大的列表，而所需的childDiv4列表则来自数组）例如：-> div 请帮助我

div

Answer 1

仔细阅读CSS .class Selector，这将有助于您了解selectors在CSS中的工作方式。

另外，请阅读jQuery Multiple Selector。

$('.childDiv1, .childDiv4').css('background-color', 'cyan');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv">
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
  `<div class="childDiv5">
    Fifth Div Child
  </div>`
  `<div class="childDiv6">
    Sixth Div Child
  </div>`
  `<div class="childDiv7">
    Seventh Div Child
  </div>`
</div>

Answer 2

Herre是指向W3Schools CSS selector reference的链接。

在您的CSS中只需输入：

.parentDiv > .childDiv1, .childDiv4 {
background-color: #666666;
}

或仅引用子div

.childDiv1, .childDiv4 {
background-color: #666666;
}

顺便说一句：您在示例中使用的是类，而不是id。

Answer 3

如果只需要静态地使用它们，那么CSS就足够了：

.childDiv1, .childDiv4 {
  background-color: your-color;
}

如果需要动态更改它们，则应使用简单的Javascript。

document.querySelectorAll(".childDiv1, .childDiv4").forEach(
  div => div.style.backgroundColor = "your-color");

Answer 4

您说的是id，所以我将您的html更改为id

<div class="parentDiv">
  <div id="childDiv1">
    First Div Child
  </div>
  <div id="childDiv2">
    Second Div Child
  </div>
  <div id="childDiv3">
    Third Div Child
  </div>
  <div id="childDiv4">
    Fourth Div Child
  </div>
  `<div id="childDiv5">
    Fifth Div Child
  </div>`
  `<div id="childDiv6">
    Sixth Div Child
  </div>`
  `<div id="childDiv7">
    Seventh Div Child
  </div>`
</div>

<script>
 document.selectAll("#childDiv1, #childDiv4").style.backgroundColor = "red";

</script>

Answer 5

使用jQuery尝试在'childDiv1','childDiv4'中提供背景颜色，在这种情况下，如果div列表很大，就没有问题。

我想你想要这样：

 $(document).ready(function(){
               var parentDiv = $('.parentDiv').find('div')
               $(parentDiv).eq(0).css('background','green');
               $(parentDiv).eq(3).css('background','green');
           })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv">
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
  `<div class="childDiv5">
    Fifth Div Child
  </div>`
  `<div class="childDiv6">
    Sixth Div Child
  </div>`
  `<div class="childDiv7">
    Seventh Div Child
  </div>`
</div>

根据ID更改某些div的样式

5 个答案: