asp.net - CSS文件中的div.classname

Question

我看过一些开发人员写的

HTML:

<div class="test"> some content </div>

CSS:

div.test {
  width:100px.
}

做 div.className而不是 .className的目的是什么？

这是否意味着仅在将类应用于div时才应用此样式。

那么， <span class='test'>content</span>对上面的css无效吗？如果是这样，那是最佳做法吗？这几乎就像为不同类型的元素覆盖样式，将样式与规则混合在一起!

Answer 1

但是，要真正回答您的问题，我首先必须回答其他几个问题。如您所见，因为这全都与上下文有关。

HTML的意义是什么？

什么是div？

与其他HTML元素有何不同？

当元素具有一个类(或类的集合)时，这是什么意思？

我将就这些问题的答案提供您的看法，然后我们将就最佳实践进行有意义的讨论。
HTML的意义是什么？
HTML的重点是向您的数据添加上下文。文本本身就可以是非常强大的功能。自从打印机发明以来，它作为一种功能非常强大的通讯工具已经很好地服务于人类。以以下文档为例:

My shopping list
Bread
Milk
Eggs
Bacon

即使有了这个简单的文本文档，大多数人也可以消除作者的意图。它的购物 list 。有一个标题，以及需要购买的一系列 list 项目。
那么，如果简单的文本文档就足够了，那么HTML有什么意义呢？
公平的问题。如果文本足以进行交流，那么为什么我们需要HTML？
文档的读者尝试解析他们获得的信息。这个过程中嵌入了大量的文化技巧和习得的模式，可用于重构原始意图。对于大多数对英语有基本了解的人来说，确定文档的含义并不重要。但是，随着文档的复杂性增加(或读者对上下文的熟悉程度降低)，正确地解析变得越来越困难。进行假设；上下文变得不清楚。最终，阅读器对消息进行准确解码的能力瓦解了，并且消息是坚不可摧的。
这是HTML存在的空间。它旨在包装数据，提供上下文和含义。因此，即使您(或计算机)无法处理实际信息，您也可以理解该信息应处于的上下文。例如，具有HTML的同一文档:

<h1>My shopping list</h1>
<ul>
    <li>Bread</li>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bacon</li>
</ul>

现在，即使我们无法理解实际数据，我们也具有上下文背景来解释数据。我们有一个标题和一个带有列表项集合的无序列表。

<h1>Xasdk bop boop</h1>
<ul>
    <li>Zorch</li>
    <li>Quach</li>
    <li>Iach</li>
    <li>Xeru</li>
</ul>

我不知道这意味着什么，但至少我知道这里有一个标题和一个无序列表。这就是浏览器查看HTML文档的方式:一些包装在上下文中的数据。
什么是 div？与其他HTML元素有何不同？
HTML元素定义上下文；他们描述了他们环绕的内容。 HTML不应更改或更改数据的含义，而只是对其进行扩充并定义数据之间的关系:父，子，同级，祖先...因此 li元素描述了一个列表项。 h1元素描述标题。 table元素描述了一个表，依此类推。
那么，什么是 div？好吧， div是一个块级HTML元素，没有自己的上下文。就其本身而言，它没有任何意义(除了它是一个块之外)。
尽管大多数其他HTML元素( span元素除外)具有某种显式上下文，但 div元素却没有。那是巨大的差异。这是一个空白框。这是一个盒子，什么都没有。当您将某些内容放入“div”中时，您是说将其放在一个框中，但实际上并没有太大意义。
那么 div的意义是什么呢？ div标记为您提供了一个空白面板，以定义您自己的上下文。回到我们的购物 list 示例:现在，无序 list 和标题之间的关系很弱。它们是弱关联的 sibling ，只是碰巧彼此相邻，但没有任何东西真正将它们作为一个单元绑定(bind)在一起。我们真正想说的是:

<grocery_list>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</grocery_list>

但是我们不能在HTML规范的范围内这样做。但是我们可以做的就是将它们放在一个“盒子”中:

<div>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

元素具有一个类(或类的集合)是什么意思？
但是，再说一次，这个盒子现在意义不大。我们真正想做的是给该框提供一些我们自己的上下文。我们想发明我们自己的元素。多数民众赞成在 class属性发挥作用。 HTML元素可增强数据，而HTML属性可增强元素。我们可以说:

<div class="shopping_list">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

所以我们说的是 div实际上是 shopping_list。该 shopping_list具有标题和无序列表。 HTML应该可以使您的数据更清晰，而不是不那么清晰。
那么，最后，这与您的问题有什么关系？
在编写CSS时，您正在利用上下文(元素，类，id和元素之间的关系)来定义样式。
回到购物 list 示例。我可以写一个说的风格:

<style>
    ul {
        background-color: red;
    }
</style>

但是我到底在说什么？我的意思是:“所有无序列表的背景颜色都应为红色”。问题是:那真的是我的意思吗？编写CSS时，请牢记结构。说所有 div元素应该看起来是特定的方式，还是只给 div一个特定的类，对吗？例如，我会断言这可能更好:

div.shopping_list h1 { font-weight: bold; font-size: 2em; border-bottom: 1px solid black; }
div.shopping_list ul li { 
    margin-bottom: 1ex;
}

在这里，我要说的是，在这种特定情况下，这些元素应以这种特定方式显示。
因此，在您的示例中，带有 div类的 test到底是什么意思？内容是什么？您想澄清什么背景？这将告诉您样式选择器的外观。
例如:

<div class="shopping_list important">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

<table class="budget">
    <tbody>
        <tr class="important">
            <td>Account Balance</td><td>$0.00</td>
        </tr>
            </tbody>
</table>

.important的CSS选择器是一个好主意吗？ “重要的购物 list ”与“预算表中的重要表行”是否一样？
而且只有您可以回答该问题，具体取决于您的数据是什么以及决定如何标记该数据。
关于CSS特殊性，有很多技术性话题，例如维护复杂样式表和元素之间复杂关联的良好实践，但最终归结为回答以下问题:

我想交流什么？ (数据/内容)

数据在什么上下文中？ (HTML)

应该是什么样？ (CSS)

一旦您可以回答这些问题，其他所有内容都将开始出现。