问在CSS文件中的div.classname是什么意思？

EN

要真正回答问题，必须回答其他几个问题。因为，这都是关于上下文的。

• HTML的要点是什么？
• 什么是div？
• 它与其他HTML元素有何不同？
• 当一个元素有一个类（或者一组类）时，这意味着什么？

我会就这些问题的答案给出我的意见，然后我们可以对最佳做法进行讨论。

HTML的要点是什么？

HTML的要点是为数据添加上下文，文本本身是一个非常强大的东西。自从印刷机的发明以来，它作为一个非常强大的通讯工具已经狠好地服务于人类了。以下面的文档为例：

My shopping list
Bread
Milk
Eggs
Bacon

即使有了这个简单的文本文档，大多数人都可以揣测作者的意图：购物清单。有一个标题以及需要购买的一系列列表项。

那么，如果简单的文本文档就足够了，那么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标签提供了一个空白页面来定义上下文。回到我们的购物清单示例：现在，无序列表和标题之间存在弱关系。他们是弱联系的兄弟姐妹，他们恰好相互紧挨着，但没有任何东西将他们作为一个整体绑定在一起。真正想说的是：

<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和元素之间的关系）来定义样式。

所以回到购物清单的例子。我可以写一个style，说：

<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选择器？“重要购物清单”与“预算表中的重要表格行”是否一样？

只有回答这个问题，这取决于数据是什么以及如何决定标记这些数据。

有许多关于CSS特性的技术主题，例如维护复杂样式表和元素之间复杂关联的良好实践，但最终归结为回答这些问题：

1. 想传达什么？（数据/内容）
2. 数据的背景是什么？（HTML）
3. 应该是什么样子？（CSS）

一旦回答这些问题，其他一切就会开始落实到位。

div.className 具有更高的特异性.className。这意味着一些事情：

1. 只有具有className的div才会接收样式，其他元素则不会
2. css for div.className 将以更小的特性覆盖其他css规则，就像.otherClassName