Question

我有两个具有类.body的div，但是，一个在另一个带有类.box的div中 - 如下所示：

<div class="box">
   <div class="body">
   </div>
</div>

<div class="body">
</div>

我只想设置.box内部的.body ...但是我在下面做的事情并没有工作，它也正在将样式应用到.body外面。

.box .body {
   background-color: red;
}

我不想将.box更改为#box作为＆＃34; box＆＃34;可以在同一文档中放置多次。

请点击此处：http://jsfiddle.net/H2cmE/

Answer 1

CSS实际上是有效的，并且只会将样式应用于具有类.body的任何元素，这些元素驻留在具有类.box的另一个元素中。我们需要查看您的完整HTML结构，以了解为什么这不适用于您的情况。

Answer 2

<强> HTML：

<div class="box">
    green box
   <div class="body">
        inside .box ( it will be red box)
   </div>
</div>

<div class="body">
    not inside .box ( it will be blue box)
</div>

<强> CSS：

.box .body {
   background-color: red;

}

.box {
    width:400px;
    height:400px;
    background-color: green;
}

.body {
    width:400px;
    height:50px;
    background-color: blue;    

}

See demo

Answer 3

.box＆gt; div.body
.box的：第一胎
.box div.body

如果您想了解有关css选择器的更多信息，请访问以下网站： http://www.w3schools.com/cssref/css_selectors.asp

我希望它可以帮助您解决问题。

Answer 4

你做得对。你不应该使用ID。切勿使用ID进行样式设置

看小提琴

see fiddle

http://jsfiddle.net/uKEj4/

在类中设置类，但不在同一类的外部设置类

4 个答案: