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

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>

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

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

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

的selector前级指定哪些类型的元素可以借此类

Answer 2

之间的一个很重要的区别div.box,只是.box在一些所谓的选择特异性.它是一组规则,它定义了一旦浏览器开始浏览可能影响特定元素的所有选择器,哪个选择器会获得更多权重.

这意味着在以下示例(DEMO)中很容易证明

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

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

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

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

CSS的最基本规则之一是选择器可以以一种方式重新定义,无论定义是最后的还是对特定元素的影响,它将是将要使用的那个(唯一的例外是当使用时!important总是优先) .

现在在上面的例子中重新定义了.box类选择器实际上应该隐藏文本,但它仍然可见.如果我们说后面的规则总是优先的话,那怎么可能呢？因为div.box规则具有更高的特异性,.box因为它实际上获得div了.box在其选择器声明(div.box)中包含element()和类selector ()的点.

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

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

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

Answer 3

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

例:

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

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

例:

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