html - css:我应该限制通用选择器的使用(*.classname vs a.classname)吗？

Question

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

Answer 1

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

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

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