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对'test'没有影响吗？如果是这样,这是最佳做法吗？这几乎就像样式覆盖不同类型的元素,混合风格与规则!

Answer 1

但是,要真正回答你的问题,我首先要回答其他几个问题.因为,正如您将看到的,所有这些都与环境有关.

• 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呢？嗯,a 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>
    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)

一旦你能回答这些问题,其他一切都将开始落实到位.

Answer 2

你是对的. div.className 具有更高的特异性.className.这意味着一些事情:

1. 只有带className的div才会收到样式,其他元素则不会
2. css for div.className 将覆盖其他具有较少特异性的css规则,就像它一样.otherClassName

Answer 3

就像你说的那样style will be applied only when the class is applied to a div.它不适用于任何其他类型的元素.

当你有一个只被应用于a的类时,最好这样做div.

虽然如果存在另一个类,因为当应用于具有类的div时.test,它将被任何样式div.test覆盖test.