1

什么时候应该向元素添加类并使用类选择器设置它们的样式，什么时候应该在父元素上添加类/id 并按原样使用元素？

例子：

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

.warning-dialog {}
.warning-dialog h3 {}
.warning-dialog p {}

对比 

<div class="warning-dialog">
    <h3 class="warning-title">This is the title</h3>
    <p class="warning-message">This is the message</p>
</div>

.warning-dialog {}
.warning-title {}
.warning-message {}

或者你应该这样做

.warning-dialog .warning-dialog {}
.warning-dialog .warning-title {}
.warning-dialog .warning-message {}
4

6 回答 6

7

问自己这个简单的问题：

<x>这个共同祖先下的所有元素是否意味着相同的事情？

如果答案是肯定的，那么您不需要在这些元素上使用类名。以您的代码为例，以下内容就足够了：

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

因为在 a 内部.warning-dialog，所有h3元素 (1) 和所有p元素 (1) 的含义相同，即对话框的标题和内容！这意味着，您不需要在它们上有任何特定的类名，并且可以通过.warning-dialog h3or轻松访问它们.warning-dialog p。

但是，如果上述问题的答案是“否”，那就完全不同了：

<div>Warning</div>
<div>Info</div>
<div>Error</div>

您不能（轻松）用 CSS 指定每个 div，它们的含义并不相同，因此您需要使用类名来使其更好！

<div class="warning-dialog">Warning</div>
<div class="info-dialog">Info</div>
<div class="error-dialog">Error</div>
于 2012-04-20T17:38:39.893 回答
1

这取决于您想要/需要您的样式有多灵活。将 CSS 附加到父标签意味着父标签下的所有相似标签都将具有相同的样式。如果其中一些应该/可能不同，您将需要一种专门设置它们的方法。

<div class="foo">
    <div>stuff</div>
    <div>other stuff</div>
</div>

在这种情况下，“stuff”和“other stuff”必须具有相同的风格（除非我们开始使用nth-childand stuff）。

于 2012-04-20T17:33:48.100 回答
1

从技术上讲，对于这两个示例，您都可以使用 out 类。实际上只有父容器会有所作为。例如....

如果你要在一个页面上有多个错误容器，你可以做这样的事情。

<div class="warning-dialog">
    <h3>This is the title</h3>
    <p>This is the message</p>
</div>

.warning-dialog {
/*css for container*/
}

.warning-dialog h3 {
/*css for all h3 tags in that container*/
}

.warning-dialog p {
/*css for all p tags in that container */
}

如果您只打算在页面上使用该容器一次，您可以这样做。

<div id="warning-dialog">
        <h3>This is the title</h3>
        <p>This is the message</p>
    </div>

    #warning-dialog {
    /*css for container*/
    }

    #warning-dialog h3 {
    /*css for all h3 tags in that container*/
    }

    #warning-dialog p {
    /*css for all p tags in that container */
    }

而且，如果您要使用相同的容器，但在其中一个容器中设置不同的标题标签样式，那么您可能希望在 p 标签上使用一个类..例如...

<div class="warning-dialog">
        <h3 class="option2">This is the title</h3>
        <p>This is the message</p>
    </div>

    .warning-dialog {
    /*css for container*/
    }

    .warning-dialog h3 {
    /*css for all h3 tags in that container*/
    }

    .warning-dialog p {
    /*css for all p tags in that container */
    }

    .warning-dialog .option2 {
    /*css for option 2*/
    }

然而，这可能并不总是最实用的方法，因为您将在这些之间遇到冲突的 CSS……并且必须使用！important。

.warning-dialog p {
    /*css for all p tags in that container */
    }

    .warning-dialog .option2 {
    /*css for option 2*/
    }

因此，最好为父元素使用不同的 ID。IE(errormsg1 和 errormsg2) ...

但实际上这一切都取决于您项目的背景。

于 2012-04-20T18:00:11.237 回答
0

基本概念是，

  1. 要样式化的独特元素，使用id
  2. 要设置样式的相似元素的集合，使用class.
于 2012-04-20T17:30:23.323 回答
0

这主要是个人喜好问题。我更喜欢让我的 HTML 尽可能干净，所以我更喜欢这个

.warning-dialog {}
.warning-dialog h3 {}
.warning-dialog p {}

此外，如果一个元素需要通过 JavaScript 访问，使用 id 而不是类更容易/更快，但您必须确保在页面中只使用该元素一次。

于 2012-04-20T17:34:16.040 回答
0

  这取决于您的口味和个人喜好；但是，正如一些人所指出的，如果所有子标签（特定类型，例如 div）都需要相同的样式，则不需要为它们创建类；只需使用标签名称。如果一些需要相同的样式，而另一些不需要，则将类应用于需要（或不需要）它的类，并相应地设置样式。
  如果您觉得内容在不久的将来可能会发生变化，并且新内容需要不同的样式，您可以在创建新标签时将类添加到新标签中。
   关键是没有明确的标准方法，每个人都可以告诉你什么对他们有用。

于 2012-04-20T17:59:31.613 回答