html - 你如何在CSS中引用div？

Question

我有以下代码:

<div class = "badge">
   <div class = "badge-header">
   </div>
</div>

在 css 中设置徽章标题样式的正确方法是什么？

是吗

.badge .badge-header {
}

or 
.badge-header {
}

另外，我们如何构建我们的 css 名称？我们如何构建我们的 div 以及我们应该为上述每个使用什么选择器？

如果你在一个 div 中有一个 div，我们在 CSS 中应该遵循什么命名约定？

Answer 1

两者

但只有当“badge-header”位于“badge”内部时，第一个才会应用样式

第二个将应用所有“badge-header”元素。

参见示例:https://jsfiddle.net/6bvLtqLw/

CSS

.badge-header{
    color:blue;
}

.badge .badge-header{
    background-color: yellow;
}

HTML

<div class="badge">
<div class="badge-header">
        inside
    </div>
</div>
<div class="badge-header">
    outside
</div>