Html CSS:：.className和div.className之间的差异

我编写了一个html元素，如下所示：

<div class="box"> Foo box </div>

---

我想问的是，两个css for box类之间有什么不同。

不同之处在于，在第一个类中，您告诉我们class

box

的所有元素（

div

，

p

，

span

…）都具有该属性。 像这样：

<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>

---

类之前的

选择器

指定可以采用该类的元素类型

.box

表示具有类box的任何元素

例如：

<div class="box">...</div>
<section class="box">...</section>
<span class="box">...</span>

<div class="box">...</div>

---

div.box

和简单的

.box

之间的一个非常重要的区别在于一个叫做的东西。这是一组规则，定义了一旦浏览器开始遍历可能对特定元素产生影响的所有选择器，哪个选择器的权重更大

这意味着什么在下面的示例（）中很容易演示

我们有一个包含一些文本的简单div

<div class="box">
    Zarro boogs found!
</div>

CSS最基本的规则之一是，选择器的重新定义方式可以是：任何定义最后一个，并且对特定元素有影响的都是将要使用的元素（唯一的例外是使用始终优先的

！important

）

在上面的示例中，重新定义.code>框类选择器实际上应该隐藏文本，但它仍然可见。如果我们说后一种规则总是优先，那怎么可能呢？这是因为

div.box

规则具有比

.box

更高的特殊性，因为它实际上在其选择器声明（

div.box

）中同时包含元素（

div

）和类选择器（

.box

）

当然

div.box

规则将仅应用于

div

元素，但由于类选择器通常是可重用的代码片段，因此在div上使用它们时有很多情况

虽然官方W3规范中的规则并不难理解，但有时很难记住。这就是为什么我想推荐一篇关于CSS选择器特殊性的优秀文章

---

在我看来，当使用CSS样式表跟踪继承问题时，选择器的特殊性是迄今为止最需要掌握的东西。

这对我来说是非常有用的文档，而且提供的链接也很好。

<div class="box">...</div>

<div class="box">
    Zarro boogs found!
</div>

div.box {
    padding:0.8em;
    background: #bd0000;
    color: #fff;
}
.box {
    color: #bd0000;
}