Question

HTML：

<div id="wrapper">
  <div class="body">
     text text text
  </div>
  <div class="comment_submit">
       <!-- here goes username text field !-->
       <div class="body">
         <textarea></textarea>
       </div>
       <!-- here goes submit button !-->
    </div>
</div>

CSS：

#wrapper{
  float:left;
  width:100%;
}
#wrapper .body{
  border:1px solid red;
  background:#f5f5f5;
  padding:5px;
}
.comment_submit .body{
  border:2px solid red;
  background:#cccccc;
}

为什么在comment_submit div中的body div会获得 #wrapper .body 样式，而不仅仅是 .comment_submit .body 样式？

我知道 #wrapper .body 样式包含#wrapper内的所有 .body div但是我怎么能阻止它？

Answer 1

这解决了您的问题：

#wrapper > .body{
  border:1px solid red;
  background:#f5f5f5;
  padding:5px;
}

#wrapper .body =“选择.body”后代的每个#wrapper。
.comment_submit .body =“选择body的后代中的每个.comment_submit类。

ID选择器具有比类选择器更高的特定性，因此在第一个选择器中定义的属性优先于＃2中的属性。

该解决方案使用子选择器>，其中说：“选择.body的直接子元素的每个#wrapper元素。

Answer 2

#wrapper .body{}将适用于所有.body类，无论它们有多深，只要它们仍在#wrapper内。

我建议您将.body内的.comment_submit重命名为.comment_submit_body以解决问题。

您的班级名称对于不同的样式不应该相同。

Answer 3

这与Selector Specificity有关。简单来说，它意味着#id选择器（第一种情况）优先于类选择器（第二种情况）。你可以通过

解决这个问题

#wrapper .comment_submit .body{
  border:2px solid red;
  background:#cccccc;
}

css相同的类名称具有相同的样式

3 个答案: