Question

我想这很简单，虽然我似乎无法理解为什么我的CSS代码无法正常工作。

这是我的代码：

.box{
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.box .warning{
    background: #FFF7F2;
    border: 1px solid #ffefe5;
}

<div class="col-xs-4">
                    <div class="box warning">dfda</div>
</div>

一个小提琴，以显示它在行动..

http://jsfiddle.net/91b21z8k/

**我的问题是，为什么<div>没有分配.warning类？

Answer 1

不要在.box选择器后面给出空格，因为它在同一个类中：

.box.warning{
    background: #FFF7F2;
    border: 1px solid #ffefe5;
}

Answer 2

因为当你.box .warning时，你指的是一个带着班级的儿子＆＃34;框＆＃34;类＆＃34;警告＆＃34;的元素。它永远不会起作用。

如果您执行了.col-xs-4 .warning，则表明您已应用了该样式

关于选择器的文档以及如何应用它们： http://www.w3.org/TR/css3-selectors/#selectors

更新

检查@ C-link尼泊尔答案以获得最后一点（如果你必须接受答案，他首先给出了正确答案，XD）：删除类之间的空格使得样式仅适用于将具有所有出现在规则上的课程：

关于班级选择器：http://www.w3.org/TR/css3-selectors/#class-html

实施例

用红色绘制段落：

<div class="perry">
    <p class="mason">Hi</p>
</div>

.perry .mason {
    color: red;
}

<div>
   <p class="perry mason">Hi</p>
</div>

.perry.mason {
    color: red;
}

Answer 3

因为在定义中包含空格意味着选择器将定位.warning的子元素.box元素;不是.box元素，它们也有.warning类。

要定位<div class="box warning"></div>，只需删除选择器名称中的空格：

.box.warning{
    background: #FFF7F2;
    border: 1px solid #ffefe5;
}

Please see this updated jsFiddle

Answer 4

删除 FIDDLE

之类的空间

.box.warning{
    background: #FFF7F2;
    border: 1px solid #ffefe5;
}

或者只需写下 FIDDLE

.warning{
    background: #FFF7F2;
    border: 1px solid #ffefe5;
}

Answer 5

如果您希望样式div 嵌套到div.box ，请编写

<div class="col-xs-4 box">
    <div class="warning">dfda</div>
</div>

CSS中类之间的空格意味着由选择器定义的元素层次结构。

Answer 6

删除两个类名之间的空格

.box{
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.box.warning{
    background: #FFF7F2;
    border: 1px solid #ffefe5;
}

Herr＆＃39; JSFiddle Demo！

CSS - 以正确的方式编写课程

6 个答案:

更新

实施例