Question

我想在下面的类子集中添加一个margin-top：5px：

这部分错了：

.af-mh-container-1011.af-row{
    margin-top: 5px;
}

使用这个html：

<div class='af-mh-container-1011'>
    <!-- add to this one -->
    <div class='af-row'>
      here i am
   </div>
</div>

<div class='af-mh-container-not-1011'>
   <div class='af-row'>
      here i am
   </div>
</div>

Answer 1

可能你错过了点之间的space -

.af-mh-container-1011 .af-row{
    margin-top: 5px;
}

JSFIDDLE - http://jsfiddle.net/zgf0v0tn/

Answer 2

.af-mh-container-1011.af-row选择器尝试匹配同时包含af-mh-container-1011和af-row类的元素。

为了选择具有<div>类的嵌套子af-row，您可以使用direct descendant combinator A > B，如下所示：

.af-mh-container-1011 > af-row {
    margin-top: 5px;
}

同样A B会匹配嵌套的B，它是A元素的后代 - 而不一定是直接后代或孩子。

Answer 3

你所写的是对这两个类的元素应用边距。

您想要定位子元素。

以下是一些选项：

.af-mh-container-1011 > .af-row {
    margin-top: 5px;
}

.af-mh-container-1011 .af-row {
    margin-top: 5px;
}

.af-mh-container-1011 div {
    margin-top: 5px;
}

这三个选项都会影响你的af-row课程。第一个选项是子选择器。这只会影响直接孩子。嵌套在.af-row中的其他div不会受到影响。第二个选项将影响您的af-row和嵌套在.af-row中具有相同类的任何元素。最后一个选项将影响af-mh-container-1011中的所有div。请参阅下面的示例以进一步说明。

<div class='af-mh-container-1011'>
    <div class='af-row'>
        <div class='af-row'>
            This nested element is unaffected by a child selector (first option) but is affected by a decendant selector (second option). It is also affected by the 3rd option.
        </div>
   </div>
</div>

如何选择包装在特定容器中的类

3 个答案: