Question

我认为我理解类特殊性规则。我想有一个名为themecolor的类或id，我可以把它放在我想要用于该颜色的任何元素上。有时它是背景，有时它是图标的颜色。

.themecolor {
  color: rgb(47, 86, 111);
}

我在Bootstrap中使用它，例如我有这个：

<div class="themecolor navbar navbar-inverse navbar-fixed-top">

和此：

<span class="glyphicon glyphicon-#{icon} themecolor" data-toggle="tooltip" data-placement="top" title="#{tooltip}"></span>)

它不起作用，因为在每种情况下都有更具体的规则会破坏我的颜色。但是我宁愿避免主题颜色规则取决于它的使用位置。

顺便说一句，我尝试了!important，但也没有这样做。

Answer 1

CSS 所有关于上下文。

元素接收的样式取决于：

特异性
级联中的位置

<强>特异性

p {}不如
p.introduction {}，其具体程度低于
article p.introduction {}，其具体程度低于
article#profile p.introduction {}等。

<强>级联

对于特异性相同的情况......

在article p {color: green;} body p {color: red;}中，段落文字为red。
但在body p {color: red;} article p {color: green;}中，段落文字为green。

所以，虽然你写道：

我想要一个名为.themecolor的课程，我可以穿上它我要对background-color。
采取的任何要素

正如您将看到的那样，使用：

.themecolor {
background-color: rgb(47, 86, 111);
}

通常不会起作用 - 因为，您的.themecolor声明可能很容易（虽然偶然）被样式表中其他位置的更具体的选择器覆盖，或者通过级联下方的等效特征选择器覆盖。

最好，将选择器组合在一起，使用.themecolor作为准变量：

.THEMECOLOR,
.navbar.themecolor,
.glyphicon.themecolor {
background-color: rgb(47, 86, 111);
}

然后，您可以根据需要向此列表添加任意数量的新元素，并始终声明元素的主要Bootstrap类，紧跟着.themecolor：

.THEMECOLOR,
.class1.themecolor,
.class2.themecolor,
.class3.themecolor,
.class4.themecolor,
.class5.themecolor,
.class6.themecolor {
background-color: rgb(47, 86, 111);
}

N.B。语法.class1.themecolor表示：

当元素有.class1 和时，它有.themecolor

Answer 2

我搞砸了：@Paulie_D正确地提醒我，我在导航栏上使用“颜色”，我指的是背景颜色。

我仍然对我的问题感到好奇

CSS类优先级

2 个答案: