css：我应该限制使用通用选择器（*.classname vs a.classname）吗？答案

【问题标题】：css: Should I limit the use of universal selectors (*.classname vs a.classname)?css：我应该限制使用通用选择器（*.classname vs a.classname）吗？
【发布时间】：2010-09-24 03:58:17
【问题描述】：

我有一个关于 CSS 选择器的问题。

假设我有以下 html

<div class="message">
  <div class="messageheader">
    <div class='name'>A news story</div>
  </div>
</div>

在 css 中，我可以像这样引用名为 name 的 class

div.message div.messageheader div.name {}

或

.name {} /* ie *.name{} */

一种方法比另一种更好吗？

我明白，如果我有一个名为name 的类的额外“实例”，即

<div class="message">
   <div class="messageheader">
      <div class='name'>A news story</div>
   </div>
</div>

<a class='name'>A news story</div>

我可以使用div.message div.messageheader div.name {} 引用第一个实例，使用a.name {} 引用第二个实例，但我只对初始场景感兴趣。

【问题讨论】：

标签： html css-selectors css

【解决方案1】：

如果您只对使用 .name 的初始场景感兴趣，就可以了。事实上，使用 CSS 的最佳实践是始终从更通用的开始，并在进行时集中注意力。

另外，像 div.* 这样的操作是不必要的，除非你在不同的元素上有相同的类并且想让它们不同。如果你是嵌套类，那就更没必要了。 .messageheader .name 将提供相同的定位。

记住 CSS 确实意味着级联。如果你让一切都变得如此有针对性，你将不得不重新定义每一个元素。

【讨论】：

【解决方案2】：

在我看来，这真的取决于你。一种方法更短，但另一种更精确，尽管依赖于标记保持大致相同。如果这是一个复杂的项目，那么也许更具体是正确的方法。否则，要放松一点。试着找到一个平衡点。

请记住，在 CSS 中使用 cascade 很重要。为什么要为不需要的东西添加类和 id？

【讨论】：

【解决方案3】：

一般来说，特异性是有利的，但在层级层次上比在单位层次上更重要。我的意思是'div' 是多余的，并且可能会造成破坏（见下一段），但#foo .bar .baz 是一种很好的做法。

一般来说，我试图让人们从 OO 的角度来思考 CSS。如果您将样式定义为一个类，请确保它的行为类似于一个类。在这种情况下，断言div.foo 而不仅仅是.foo 有点像定义了一个子类。没关系如果这是你想要的。始终考虑未来加价的潜在问题。理想情况下，您希望未来的代码能够准确地自动继承它所需要的东西，既不会被模糊的 CSS 断言污染，也不会因为过于具体的断言而丢失某些东西。

在实践中，我发现您通常喜欢这种形式：

#foo .bar {}

仅为最通用的样式保留根级类。

【讨论】：

【解决方案4】：

我发现同时使用这两种方法可以帮助您的 CSS 的逻辑组织。对要应用于该类的所有项目的属性使用通用的“.class”，对类的特定类型对象使用更具体的“p.class”。例如：

<style>
div.product {
float: left;
padding: 1em;
border: 1px solid blue;
}
.price { 
color: #009900;
}
p.price {
text-align: right;
}
</style>

<div class="product">
    <p>Lorem ipsum <span class="price">&pound;8.99</span> dolor sit amet.</p>
    <p class="price">&pound;5.99</p>
</div>

您的问题的答案是，两种方法都不是更好，它们只是做不同的事情。一定要同时使用！利用不同选择器类型的强大功能是优秀 CSS 的一个重要方面，也是避免冗余的好方法。其他有用的方法是在一个对象上使用多个类（例如

），在对象上组合类和 id（它们不是互斥的）并使用 HTML 的父/子关系来避免尽可能“过度分类”（例如 ul.someClass li {} 而不是 ul li.someClass {}）。快乐编码！

【讨论】：

【解决方案5】：

我同意 Jeremy B 的回答，但我想补充一点。

在您的示例中，您可以像这样引用名为 name 的类

div.message div.messageheader div.name {}

或

.name {}

或

div.name

如果您想覆盖不太具体的规则，第一个是有意义的。第二个是通用的。如您所说，第三个很好，如果您想使用相同的类将不同的样式应用于不同的元素（但在最后一种情况下，您很可能在分配类时做错了） .

我知道这只是一个例子，但在你的代码中我看到了太多的类。请记住，尽可能使用元素选择器是一件好事。 IE。如果您想为该 div 或为“messagehader”类的 div 中的所有 div 赋予某种样式，则应使用此选择器：

div.messageheader div

您还可以删除类消息头，然后选择该 div：

div.message div

等等。

显然，您需要在页面中使用一些类，但不要为所有内容指定类。在很多情况下是没有必要的。

【讨论】：