Question

这可能是一个愚蠢的问题，也许我已经太长了，但是有没有办法为一个元素添加一个类并让它只影响子元素？

＆＃13;

$('#add').click(function(){
   $('.parent').append("<div class='child'></div>");
  });
$('#bg').click(function(){
  $('.child').css('background-color', 'orange');
  });

＆＃13;

.parent {
  background-color:yellow;
  border: 2px solid black;
  height:200px;
  width: 300px;
  }

.child {
  height:15px;
  width:280px;
  border: 1px solid black;
  margin-top:10px;
  margin-bottom:10px;
  margin-left:5px;
  background-color:white;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <button id='add'>Add another</button><button id='bg'>Change Background</button>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
  </div>

＆＃13;

参考片段，我需要父div背景颜色保持白色，但我需要更改css，以便它影响所有未来动态创建的div。

Answer 1

向.parent div添加一个类，让它影响孩子：

$('#add').click(function() {
  $('.parent').append("<div class='child'></div>");
});
$('#bg').click(function() {
  $('.parent').addClass('orange-bg');
});

.child {
  height: 15px;
  width: 280px;
  border: 1px solid black;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
  background-color: white;
}
.parent {
  background-color: yellow;
  border: 2px solid black;
  height: 200px;
  width: 300px;
}
.parent.orange-bg .child {
  background-color: orange
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <button id='add'>Add another</button>
  <button id='bg'>Change Background</button>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

Answer 2

使用css如下

.parent .child {
   // your css  here
}

此css将应用于具有类父的父级的所有元素。

CSS用于定位子项但不影响它应用的元素

2 个答案: