我应该在css中使用element.myclass还是.myclass？

Question

如果我应该使用例如，我无法找到解释在CSS中使用element.myclass或.myclass来设置元素的样式。

所以，我应该使用

[p/span/div/h1/etc..].intro {
  font-size: 10px;
}

或

.intro {
  font-size: 10px;
}

吗

我知道这两者之间的区别，但我不知道我需要使用哪一个。

Answer 1

如果选择器不明确（请参阅hungerstar答案），请.myclass优先于p.myclass，如SonarQube所述：

应删除超合格元素的名称

除非元素名称导致类的行为不同，否则不必编写li.active等选择器。在大多数情况下，从选择器中删除元素名称是安全的，既可以减小CSS的大小，又可以提高选择器的性能（不再需要匹配元素）。

删除元素名称也会松开CSS和HTML之间的耦合，允许您更改使用该类的元素，而无需更新CSS。

Answer 2

我认为这是一个特殊问题。因此，我会在.intro之前使用p|span|div.intro。具有更高特异性的选择器胜出。

.intro的特异性为0 0 0 1。

p.intro的特异性为0 0 1 1，高于.intro。

我们说.intro是：

.intro {
    color: green;
}

因此.intro的任何元素都会有绿色文本。但是你希望所有段落都有橙色文本。您可以创建一个新类.p-intro，也可以：

p.intro {
    color: orange;
}

哪个特异性比.p-intro稍微增加一点，但“大”的好处是您不必通过所有标记来添加/删除.p-intro所有段落。通过在CSS中将p添加到.intro，您可以一次更新整个网站。

我总是尝试使用具有最低特异性的CSS选择器来完成工作。这样，稍后，当不可避免的变化发生时，更容易更新/扩展现有的样式。

注意：有关其他好处，请参阅其他答案。

Answer 3

根据Ockham的剃刀，始终使用最简单的方法：如果.intro足以满足您的需求，请坚持使用它作为第一选择。之后，如果您需要在几种情况之间区分规则，请放大选择器以使其更具体（如果发生冲突，浏览器将选择最具体的选择器）。