使用css定位子html元素

Question

呈现以下html结构

<div id="details">
    <div class="col-lg-12 header-section" style="">
</div>

我尝试使用此css选择器

来应用css

div#details > .col-lg-12+.header-section {
    margin-bottom: 30px; 
}

但这不起作用，为什么？

Answer 1

您应该删除+

div#details > .col-lg-12.header-section {
    color: green;
}

<div id="details">
    <div class="col-lg-12 header-section" style="">DIV</div>
</div>

使用您的css代码，您选择的是header-section类的元素，它是col-lg-12的下一个兄弟，所以在这种情况下它会起作用DEMO

Answer 2

.parent .child {
    /** Your css here **/
}

很简单。

Answer 3

只需删除＆＃39; +＆＃39;！它会在你这样做后立即起作用

＆＃13;

＆＃13;

#details > .col-lg-12.header-section {
    color: blue;
}

＆＃13;

<div id="details">
    <div class="col-lg-12 header-section">This is a div i guess LOL</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

请改用：

div#details > .col-lg-12.header-section

此外，在#details之前的div不是必需的，因为你应该只有一个带有该id的元素，所以你可以考虑删除它。

为了使效果更加明显，以下是选定项目背景颜色而不是边距的小提琴：https://jsfiddle.net/j30hq8jt/11/