html - 让 CSS 代码与默认 CSS 代码相矛盾，好还是不好？

Question

假设我的 CSS 中有这个:

div {
margin: 0;
overflow: auto;
padding: 1%;
text-align: center;
word-wrap: break-word;
}

那应该是所有div的默认代码。但是，如果我有另一个 div 的代码与此默认值相矛盾怎么办:

div.a {
background-color: #ffffff;
border: 2px solid;
text-align: left;
}

如您所见，与背景颜色或边框没有矛盾，但矛盾在于此 div 是 text-align: left 而默认是 text-align: center。我实际上已经将这段代码用于 html 页面，并且没有发现浏览器解释它的问题。但我想知道这是否仍然是不好的做法，或者是否会导致 future 出现问题。

Answer 1

样式表中不可能出现矛盾 - 选择器要么更具体(因此会覆盖不太具体的选择器)，要么会出现得更晚，因此会覆盖前一个选择器的规则。

在您的示例中， div.a 选择器更具体，因为它按类选择，而不仅仅是标签名称。这意味着您的 div.a 规则是在 div 规则之前还是之后并不重要，div.a 规则将始终适用，因为它们更具体。

特异性规则起初可能看起来很复杂，但您很快就会习惯它们。

https://css-tricks.com/specifics-on-css-specificity/