HTML：
<div class="test"> some content </div>
CSS：
div.test {
width:100px.
}
做div.className而不仅仅是.className的目的是什么。
这是否意味着只有当类应用于div时才会应用此样式。
所以< span class ='test'> content< / span>将不会对上面的css“test”有影响吗？如果是这样，最好的做法是？这几乎就像为不同类型的元素，混合风格与规则一样的风格！
解决方法
> 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)
一旦你可以回答这些问题，其他的一切都将开始落实到位。
