css - 强制为选择器使用样式，无论它在 dom 中的什么位置

Question

假设我想定义一个编号的圆圈，如下所示：

http://jsfiddle.net/edi9999/6QJyX/

.number
{
    border-radius: 50%;
    width: 32px;
    height: 24px;
    text-align: center;
    padding-top:8px;
    font-size: 14px;
    display:inline-block;
    line-height: 16px;
    margin-left:8px;
    color:white;
    background-color:black;
    border-color:white;
}

我想增加选择器的重要性，这样无论元素在什么上下文中，具有类号的元素看起来都是一样的。

这是一个代码破坏的例子：http: //jsfiddle.net/edi9999/6QJyX/2/

一种方法是将 !important 添加到 CSS 的所有属性中，但我想知道它们是否可以是其他解决方案，因为它有点糟糕。

我添加了私有标签，因为这看起来有点像代码封装。

Answer 1

您最好的选择是增加选择器的特异性。除此之外，您无能为力。

#id .number

ID 选择器将增加特异性，这样只有选择器中的另一个 ID 才能覆盖它。

http://jsfiddle.net/6QJyX/3/

Answer 2

增加选择器的特异性只会导致特异性战争（导致愤怒，导致仇恨，导致痛苦）。我建议降低导致问题的选择器的特异性。

伪代码如下：

.number {...}
.card span {...} // this selector is questionable
<div.number> this is styled correctly </div>
<div.card>
    <span.number> this is styled incorrectly </span>
</div>

为什么所有 .card spans 都需要以特定方式设置样式？似乎第二个选择器更像是一个手榴弹而不是一个狙击手——也就是说，它的目标是一组全面的元素，而不仅仅是你需要的元素。