asp.net – 在css文件中的div.classname

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

div.test {
  width:100px.
}

但是，为了真正回答你的问题，我首先要回答几个其他的问题。因为，你会看到，这是关于上下文。

> 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不应该改变或改变数据的含义，它只是增加它并定义数据之间的关系：parent，child，sibling，ancestor …所以一个li元素描述一个列表项。 h1元素描述一个标题。表格元素描述了一个表格，依此类推。

那么，什么是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>

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

但是，再一次，这个框并不意味着现在很多。我们真正想做的是给我们一些我们自己的背景。我们想发明自己的元素。这是类属性进入的地方。 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时，您正在利用您的上下文(元素，类，ids和元素之间的关系)来定义样式。

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

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

但我真的在说什么？我在说：“所有无序的列表应该有一个红色的背景颜色”。问题是：真的是我的意思吗？编写CSS时，应该牢记你的结构。说所有的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是什么意思？内容是什么？你想澄清什么背景？这将告诉你你的风格选择器应该是什么样子的。

例如：

<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>

是CSS的重要选择器是一个好主意吗？ “重要购物清单”是否与预算表中的重要表格相同？

只有您可以回答这一点，具体取决于您的数据和您如何决定标记该数据。

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

>我想要沟通什么？ (数据/内容)
>数据的内容是什么？ (HTML)
>应该是什么样子？ (CSS)

一旦你可以回答这些问题，其他的一切都将开始落实到位。