div.classname在CSS文件 [英] div.classname in css file

问题描述

我已经看到了一些开发人员编写

I have seen some developers write

HTML：

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

CSS：

div.test {
  width:100px.
}

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

这是不是意味着只有当类用于一个div这种风格将被应用。

Does this mean this style will be applied only when the class is applied to a div.

因此​​，＆LT;跨度类='测试'＆gt;内容＆LT; / SPAN＆GT; 将与上面的CSS没有测试的效果？如果是这样的情况下，是最佳的做法？这几乎就像压倒一切的作风为不同类型的元素，混合样式规则！

So, <span class='test'>content</span> will have no effect of 'test' with the css above? If that is the case, is that best practice? This is almost like style overriding for different type of elements, mixing styles with rules!

推荐答案

要真正回答你的问题，不过，我首先回答几个其他问题。因为，你会看到，它的所有有关内容。

To really answer your question, though, I first have to answer a couple of other questions. Because, as you will see, it's all about context.

• HTML是什么意义呢？


• 什么是 DIV ？


• 它是如何从其他HTML元素有什么不同？


• 又是什么意思时，一个元素（类或集合）的一类？

我会给你我的看法在回答这些问题，那么我们就可以对最佳实践进行有意义的讨论。

I'll give you my opinion on the answers to those question, and then we can have a meaningful discussion on best-practices.

HTML的重点是上下文添加到您的数据。文本，所有的本身，可以是一个非常强大的东西。由于印刷preSS的发明，它曾非常人性化也是一个非常强大的通信工具。以下面的文件，例如：

The point of HTML is to add context to your data. Text, all by itself, can be a very powerful thing. Since the invention of the printing press, it has served humanity very well as an extremely powerful communication tool. Take the following document for example:

My shopping list
Bread
Milk
Eggs
Bacon

即使这个简单的文本文档，大多数人可以dechiper作家的意图;它是一个购物清单。有标题，以及需要购买列表项的集合。

Even with this simple text document, most people can dechiper the intent of the writer; its a shopping list. There is a heading, and a collection of list items that need to be purchased.

的那么什么HTML的点的话，如果简单的文本文件就够了吗？的

公平的问题。如果文字是足够的沟通，那么为什么我们需要HTML？

Fair question. If text is enough to communicate, then why do we need HTML?

的阅读器的文件试图分析他们得到的信息。这个过程被嵌入一吨被用来重建原意文化的技巧和学到的模式。它是微不足道对于大多数人的英语的基本理解，以确定该文件的含义。然而，由于在文档增加（或与上下文减小读取器的熟悉程度）的复杂性，则它变得越来越难以正确分析。假设作出的;背景变得模糊。最终，读者能够准确去code消息分崩离析，消息是indechiperable。

The reader of the document attempts to parse the information they get. That process is embedded with a ton of cultural tricks and learned patterns that are used to reconstruct the original intent. It is trivial for most people with a basic understanding of english to determine the meaning of the document. However, as the complexity of the document increases (or the familiarity of the reader with the context decreases), then it becomes more and more difficult to parse correctly. Assumptions are made; context becomes unclear. Eventually, the reader's ability to accurately decode the message falls apart, and the message is indechiperable.

这是HTML的地方存在的空间。它desinged环绕数据，提供上下文和含义。所以，即使你（或计算机）都无法处理的实际信息，您可以了解它应该是上下文。例如，在同一文档使用HTML

This is the space where HTML exists. It is desinged to wrap around data, providing context and meaning. So even if you (or the computer) are unable to process the the actual information, you can understand the context in which it should be. For example, the same document with HTML:

<h1>My shopping list</h1>
<ul>
    <li>Bread</li>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bacon</li>
</ul>

现在，即使我们无法理解的实际数据，我们有一个上下文的背景间preT的数据。我们拥有的标题的和的无序列表的用的的集合列表项的

Now, even if we weren't able to understand the actual data, we have a contextual backdrop to interpret the data. We have a heading and an unordered list with a collection of list items.

<h1>Xasdk bop boop</h1>
<ul>
    <li>Zorch</li>
    <li>Quach</li>
    <li>Iach</li>
    <li>Xeru</li>
</ul>

我不知道这意味着什么，但至少我知道有一个标题，一个无序列表。这是浏览器看到你的HTML文档的方式：一些数据，裹在上下文中

I have no idea what that means, but at least I know there is a heading and an unordered list. That is the way the browser sees your HTML document: some data, wrapped in context.

HTML元素定义范围内;他们描述了他们环绕的内容。 HTML不应改变或更改数据的意义，它只是去扩充和数据之间的关系定义：父的孩子的兄弟的，的祖先的......因此，一个里元素描述了一个列表项。一个 H1 元素描述了一个标题。 A 表元素描述表，等等。

HTML elements define context; they describe the content they wrap around. HTML shouldn't alter or change the meaning of the data, it simply augments it and defines relationships between the data: parent, child, sibling, ancestor... So a li element describes a list item. An h1 element describes a heading. A table element describes a table, and so on.

那么，什么是一个 DIV 呢？好了， DIV 是没有自己的上下文中的块级HTML元素。由本身而言，它并不意味着什么（比的事实，这是一个块之外）。

So, what is a div then? Well, a div is a block-level HTML element that has no context of its own. By itself, it doesn't mean anything (other than the fact that it is a block).

虽然大多数其他HTML元素（使用跨度元素除外）有某种明确的背景下，在 DIV 元素没有。这是一个巨大的差异。这是一个空白框。这是一个盒子，这并不意味着什么。当你把一个'DIV'的东西，你说，它在一个盒子里，但盒子并不真正意味着很多。

While most other HTML elements (with the exception of the span element) have some kind of explicit context, the div element does not. That is a huge difference. It's a blank box. It's a box that doesn't mean anything. When you put something in a 'div', you are saying that its in a box, but that box doesn't really mean much.

的 DIV 标签提供了一个空白的石板为你定义自己的上下文。回到我们的购物清单的例子：现在，还有就是无序列表和标题之间的弱关系。他们是弱关联的兄弟姐妹，他们只是碰巧是彼此相邻，但没有真正结合在一起作为一个单元。我们真正想说的是：

The div tag provides a blank slate for you to define your own context. Back to our shopping list example: right now, there is a weak relationship between the unordered list and the heading. They are weakly associated siblings, they just happen to be next to each other, but nothing really binds them together as a unit. What we would really like to say is:

<grocery_list>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</grocery_list>

但是，我们不能这样做，HTML规范的范围内。但是，我们所能做的就是把它们粘在一个盒子：

But we can't do that within the confines of the HTML spec. But what we can do is stick them in a 'box':

<div>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

是什么意思时，一个元素（类或集合）的一类？

但同样，那个盒子并不意味着太多现在。我们真正想要做的就是给那个盒子我们自己的一些背景。我们要创造我们自己的元素。那其中类属性开始发挥作用。虽然HTML元素增加的数据，HTML属性增加元素。我们可以说：

What does it mean when an element has a class (or collection of classes)?

But, again, that box doesn't mean that much right now. What we really would like to do is give that box some context of our own. We want to invent our own element. Thats where the class attribute comes into play. While HTML elements augment data, HTML attributes augment elements. We can say:

<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应该使你的数据的更多的清晰，没有的少的清晰。

So we are saying that our div is really a shopping_list. That shopping_list has a heading, and an unordered list of items. HTML is supposed to make your data more clear, not less clear.

当你正在编写CSS，你正在利用上下文（元素，类ID和要素之间的关系）来定义的风格。

When you are writing CSS, you are leveraging your context (elements, classes, ids, and the relationship between elements) to define style.

于是回购物清单的例子。我可以写的风格，说：

So back to the shopping list example. I could write a style that said:

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

但我真的说什么？我说：所有无序列表应该有红色的背景颜色。而问题是：这真的是什么意思？当写CSS，你应该记住你的结构。那么，是否可以说所有的 DIV 元素应该是一种特殊的方式，或者只给 DIV 是个特定的类？例如，我会aruge，这可能是更好的：

But what am I really saying? I'm saying: "All unordered lists should have a background color of red". And the question is: Is that really what I mean? When writing CSS you should keep your structure in mind. Is it right to say all div elements should look a particular way, or give only divs a specific class? For example, I would aruge that this might be better:

div.shopping_list h1 { font-weight: bold; font-size: 2em; border-bottom: 1px solid black; }
div.shopping_list ul li { 
    margin-bottom: 1ex;
}

在这里，我想说的是，这些元素，在这个特定背景下应该看这种特别的方式。

Here, I am saying that these elements, in this particular context should look this particular way.

因此​​，在你的榜样，什么对 DIV 带班测试究竟意味着什么？内容是什么？什么情况下你想澄清？这会告诉你，你的风格选择应该是什么样子。

So in your example, what does a div with a class of test really mean? What is the content? What context are you trying to clarify? That will tell you what your style selectors should look like.

例如：

<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选择器？是一个重要的购物清单同样的事，作为一个在预算表中重要的表行？

Is a CSS selector of .important a good idea? Is an "important shopping list" the same thing as an "important table row in a budget table?"

和只有你能回答这个问题，取决于你的数据，以及如何你决定来标记这些数据。

And only you can answer that, depending on what your data is and how you have decided to mark up that data.

有一堆技术主题的进入有关CSS specificty，就像好的做法，维护复杂的样式表和元素之间复杂的关联，但最终这一切都归结为回答这些问题：

There are a bunch of technical topics to get into about CSS specificty, like good practices for maintaining complex style sheets and complex associations between elements, but ultimately it all boils down to answering these questions:

1. 什么我试图传达的信息？ （数据/内容）


2. 什么是环境中的数据？ （HTML）


3. 我应该是什么样子的？ （CSS）

一旦你能回答这些问题，一切将开始下降到位。

Once you can answer those questions, everything else will start to fall into place.

这篇关于div.classname在CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！