Question

我有以下代码：

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

在css中设置badge-header样式的正确方法是什么？

是吗

.badge .badge-header {
}

or 
.badge-header {
}

我们如何构建我们的CSS名称？我们如何构建我们的div以及我们应该为每个div使用哪些选择器？

如果div中有div，那么CSS中应该遵循的命名约定是什么？

Answer 1

两个

但是第一个将仅在“徽章标题”位于“徽章”

内时应用该样式

在第二个将适用于所有“徽章标题”元素。

参见示例：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>

Answer 2

两者都有效

.badge .badge-header {
}

上面的

将样式应用于具有类'.badge-header'的元素并且在具有类'.badge'的元素下

.badge-header {
}

并且上面的方法将样式应用于具有类'.badge-header'的所有元素，而不管元素在DOM中的位置。

Answer 3

两个

但是第一个将仅在“徽章标题”位于“徽章”

内时应用该样式

.badge .badge-header {
    }

在第二个将适用于所有“徽章标题”元素。

.badge-header {
}

Answer 4

如果在.badge-header的上下文中使用，第一个变体显然只会设置.badge样式。第二个将适用于所有.badge-header，无论其背景如何。

如果您确定.badge-header永远不需要在.badge的之外使用，那么您可以使用变体2，因为它更短更简洁。

如果在.badge-header不同的上下文中重用.badge可能会有用，那么请使用 * both 变体。将所有所有 .badge-header的样式放在.badge-header { ... }中。将依赖于上下文的样式放在.badge .badge-header { ... }。

中

你如何在CSS中引用div？

4 个答案: