Question

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

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

并编写类似

的CSS

.box {
    width: 400px;
    height: 40px;
    color: red;
    text-align: center;
}

or

div.box {
    width: 400px;
    height: 40px;
    color: red;
    text-align: center;
}

我想问一下盒子类的两个css是如何彼此不同的。

Answer 1

不同之处在于，在第一堂课中，您告诉所有具有班级div的元素（p，span，box ...）具有该属性。像这样：

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

第二个类意味着只有类box的div具有该属性

只有这些元素才能获得第二类：

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

课前的selector指定哪种类型的元素可以使用此类

Answer 2

div.box与简称.box之间的一个非常重要的区别在于 selector specificity 。它是一组规则，用于定义一旦浏览器开始浏览可能影响特定元素的所有选择器，哪个选择器会获得更多权重。

以下示例（DEMO）

可以很容易地说明这意味着什么

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

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

现在我们在示例中添加一些CSS选择器。

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

CSS最基本的规则之一是选择器可以重新定义，无论定义是什么，最后会对特定元素产生影响，使用它的唯一例外是{{总是优先的1}}。

现在在上面的示例中，重新定义。!important类选择器应该实际隐藏文本，但仍然可见。如果我们说后面的规则总是优先的话，那怎么可能呢？这是因为box规则具有更高的特异性div.box，因为它实际上获得了在其选择器中同时包含元素（.box）和类选择器（div）的点声明（.box）。

当然，div.box规则仅适用于div.box元素，但由于类选择器通常是可重用的代码片段，因此在div上使用时有很多情况。

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

在我看来，在跟踪CSS样式表的继承问题时，选择器特性是迄今为止最重要的事情。

Answer 3

.box表示任何具有类框的元素。

示例：

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

div.box表示只有具有类框的div元素。

示例：

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

CSS :: .className和div.className之间的区别

3 个答案: