css 文件中的 div.classname

Posted

技术标签:

【中文标题】css 文件中的 div.classname【英文标题】：div.classname in css file 【发布时间】：2011-11-02 06:01:10 【问题描述】：

我见过一些开发者写

HTML：

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

CSS：

div.test 
  width:100px.

做div.className 而不仅仅是.className 的目的是什么。

这是否意味着只有当类应用于 div 时才会应用此样式。

那么，&lt;span class='test'&gt;content&lt;/span&gt; 对上面的 css 没有“测试”的效果吗？如果是这样，那是最佳做法吗？这几乎就像为不同类型的元素覆盖样式，将样式与规则混合在一起！

【问题讨论】：

【参考方案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 不应该改变或改变数据的含义，它只是扩充它并定义数据之间的关系：parent、child、sibling , ancestor...所以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>
    ul 
        background-color: red;
    
</style>

但我到底在说什么？我是说：“所有无序列表的背景颜色都应该是红色”。问题是：这真的是我的意思吗？在编写 CSS 时，您应该牢记您的结构。是否可以说所有 div 元素都应该具有特定的外观，或者只给 divs 一个特定的类？例如，我认为这可能会更好：

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 特定性的技术主题，例如维护复杂样式表和元素之间复杂关联的良好做法，但最终归结为回答这些问题：

    我想传达什么？ （数据/内容） 数据在什么上下文中？ (HTML) 那应该是什么样的？ (CSS)

一旦你能回答这些问题，其他一切都会开始到位。

【讨论】：

@32bitkid;讲透彻。这不是答案，而是教程！ :) 很好的答案。我已经非常了解规则了。只是想看看这真正需要什么，我认为你的答案最适合它。还有其他很好的具体答案。【参考方案2】：

你是对的。 div.className 比 .className 具有更高的特异性。这意味着几件事：

    只有 className 的 div 会接收样式，其他元素不会 div.className 的 css 将覆盖其他特定性较低的 css 规则，例如 .otherClassName

【讨论】：

这是最好的答案。但我更多地关注最佳实践。你已经有这么多票了，所以我给出了 32bit 的答案。【参考方案3】：

正如你所说的style will be applied only when the class is applied to a div。它不适用于任何其他类型的元素。

当您的课程只应用于div 时，最好这样做。

虽然如果另一个类以 .test 存在，当应用于具有 test 类的 div 时，它将被 div.test 内完成的任何样式覆盖。

【讨论】：

【参考方案4】：

除了维护和个人偏好之外，CSS 选择器中还有规范点。总是很高兴知道。

div = 1 point
.className = 10 points
div.className = 1+10 points

得分最多的选择器获胜。考虑到这一点，您可以从非常一般的样式转到特定的样式。

【讨论】：

【参考方案5】：

仅当类应用于 div 时才会应用样式？

也有一些性能影响。这是性能计数器

ID 是最快的 标签名次之 没有标签名的类名最慢

至于用哪一个，就用哪个最合适。如果您的页面上有一个搜索框，那么使用 ID 将是最合适的，因为只有一个搜索框。另一方面，表格行可能会按类标识，因为存在（或可能）不止一个。

大多数人在命名类时会注意语义。阅读此博客以获得一些不错的提示：http://css-tricks.com/13423-semantic-class-names/

对不起，我想补充 关于浏览器如何读取您的 CSS 选择器，要记住的一件重要事情是它们从右到左读取它们。这意味着在选择器 ul > li a.home 中首先解释的是 a.home 所以避免犯这样的错误

【讨论】：

你有这方面的资料吗？在我的 CSS 时代，我从未听说过性能问题。【参考方案6】：

使用元素名称为类添加前缀会将样式集限制为指定的元素类型。 

.test  font-weight:bold; 
span.test  color:#fff; 
div.test  color:#000;

在这种情况下，所有使用类的元素都是粗体，SPANS 的字体是白色的，DIVS 的字体是黑色的。

【讨论】：

【参考方案7】：

没错。

这是来自 W3C 规范：

例如，我们可以将样式信息分配给所有元素 class~="田园"如下：

*.pastoral  color: green   /* all elements with class~=pastoral */
or just .pastoral  color: green   /* all elements with class~=pastoral */

以下仅将样式分配给具有 class~="pastoral" 的 H1 元素：

H1.pastoral  color: green   /* H1 elements with class~=pastoral */

鉴于这些规则，下面的第一个 H1 实例不会有绿色 文本，而第二个会：

<H1>Not green</H1> <H1 class="pastoral">Very green</H1>

【讨论】：

【参考方案8】：

这正是它的意思。这不是好或坏的做法，它完全取决于您希望特定类也应用哪些元素。有时您希望一个类应用于所有元素，有时您希望该类根据元素具有不同的效果，例如在 CSS 中同时定义 span.test 和 div.test。

【讨论】：

【参考方案9】：

您可以将类应用于多个 dom 元素，因此 div.classname 将允许您仅选择具有该类的 div 元素，而不是选择具有该类的所有 dom 元素

【讨论】：

【参考方案10】：

这是风格问题。 ;)

它只会应用于 div 元素。有些人喜欢尽可能缩小范围以帮助减少将来的维护，而另一些人则发现更开放更容易维护。大多数情况下，这主要是个人喜好问题。

【讨论】：

【参考方案11】：

这是否意味着只有当类应用于 div 时才会应用此样式？ 是的

前面的规则实际上不会对 span 产生任何影响

这种选择的原因取决于上下文。一般来说，任何 css 样式都是专注于给定页面上的特定元素，否则您将拥有

div ……

【讨论】：

【参考方案12】：

div.test 选择器将强制样式规则仅应用于具有test 类的div 元素。

【讨论】：

以上是关于css 文件中的 div.classname的主要内容，如果未能解决你的问题，请参考以下文章

如何覆盖另一个css文件中的样式

CSS CSS中的文件类型

CSS中的文件夹结构

text 主题中的自定义css自定义文件自定义css文件

使用 ?version=XXX 刷新缓存中的 CSS 文件

JS文件中的CSS代码