什么是更好的CSS选择器练习：使用多个元素或使用一个id / class？

Question

使用Alt A header nav ul li a {color: red}或Alt B .nav-link {color:red}？

有什么好处

Alt a的优点是我不需要再引入任何css id / classes，但它比alt B更容易发生特异性战争。 查看jsfiddle：http://jsfiddle.net/43znf/1/

Answer 1

这确实是主观的。当我第一次学习时，我使用Alt A做了所有事情，但现在我混合了A和B.Alt A将样式应用于每个<header> <nav> <ul> <li> <a>嵌套元素，这意味着如果你有多个匹配此嵌套模式的部分他们将以指定的方式设计。当您使用Alt B时，您必须将类/ id应用于某个元素，这意味着您可以选择哪个嵌套的<a>标记将接收该样式。

最重要的是，在Alt A或Alt B中进行编码实际上是不切实际的。我建议使用一些。

编辑：如果您计划获得需要HTML / CSS编辑的工作，您的老板可能会以某种方式完成他或她想要的工作。只是一些人抬头。

编辑2：知道何时使用ID以及何时使用Class也是一个好主意。 ID只能在文档中使用一次，类可以多次使用。

Answer 2

这取决于你想要CSS的多样性。如果您想要设置样式的单个元素或只需要少数元素，请使用id或类。但是，使用Alt A将允许您添加新元素，而无需分配id / class。

Answer 3

您可以同时使用这两者，并且两者都具有现实生活中的有效用例。 当你有一个独特的元素并且确保它的样式不需要在其他任何地方使用时，你可以使用id来简化。

例如：您的网站“模板”或“布局”的标题部分保持不变，可能您不会重复使用这些样式。

但是当你必须为一个元素设置样式表示一个表单按钮时，你必须使用一个css类，因为表单按钮将被多次使用，如你所见。

如果您坚持原则，使用类可以是优雅的。不要使用单个类重定向元素。以智能方式拆分规则，以便每个类都可以在其他地方使用。尽量避免在类中编写特定于上下文的规则，这会阻止您继承该类。