2

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

说我有以下html

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

在css中，我可以像这样引用被class调用的name

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 {}第二个实例，但我只对初始场景感兴趣。

4

5 回答 5

3

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

此外，除非您在不同的元素上有相同的类并希望使它们不同，否则不需要执行 div.* 之类的操作。如果你是嵌套类，那就更没必要了。.messageheader .name 将提供相同的定位。

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

于 2008-11-26T14:26:23.407 回答
2

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

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

于 2008-11-26T14:27:38.117 回答
2

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

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

div.message div.messageheader div.name {}

或者

.name {}

或者

div.name

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

我知道这只是一个例子，但在你的代码中我看到了太多的类。请记住，尽可能使用元素选择器是一件好事。也就是说，如果你想给那个 div 或者给一个 div 中的所有具有“messagehader”类的 div 赋予一些样式，你应该使用这个选择器：

div.messageheader div

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

div.message div

等等。

显然，您将需要在您的页面中使用一些类，但不要给所有东西一个类。在很多情况下是没有必要的。

于 2008-11-27T15:37:22.610 回答
1

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

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

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

#foo .bar {}

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

于 2008-11-26T14:32:50.587 回答
0

我发现同时使用这两种方法可以帮助你的 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 的一个重要方面，也是避免冗余的好方法。其他有用的方法是在一个对象上使用多个类（例如 <p class="someClass someOtherClass">），在对象上组合类和 id（它们不是互斥的）并使用 HTML 的父/子关系来避免尽可能“过度分类”（例如 ul.someClass li {} 而不是 ul li.someClass {}）。快乐编码！

于 2008-11-27T15:11:12.490 回答