Question

请参阅下面的屏幕抓取，我想将.navbar-account > li > a作为活动屏幕。但默认情况下，它已被禁用，活动状态为.navbar-default .navbar-nav>li>a。因此，我的字体颜色不会变为红色。我不能放!important，因为它会影响另一个页面。所以我想以某种方式启用.navbar-account > li > a中的slid-in-menu.css。

Answer 1

在这种情况下，bootstrap.min.css文件中存在的选择器比slide-in-menu.css中存在的选择器更具特异性，因此获胜者。

特异性是一个非常重要的因素，因为我们总是可以让多个选择器（例如在这种情况下）使用相同的元素，并且在这种情况下，用户代理使用选择器的特异性来确定最终将赢得哪个和得到应用于元素。

根据W3C Specs：

选择器的特异性计算如下：


如果声明来自的是1，则是一个'style'属性而不是带有选择器的规则，否则为0（= a）（在HTML中，元素的“style”属性的值是样式表规则。这些规则有没有选择器，所以a = 1，b = 0，c = 0，d = 0.）

计算选择器（= b）
中的ID属性数
计算选择器（= c）
中其他属性和伪类的数量
计算选择器中的元素名称和伪元素的数量（= d）


特异性仅基于选择器的形式。特别是，“[id = p33]”形式的选择器被计为属性选择器（a = 0，b = 0，c = 1，d = 0），即使id属性被定义为“ID” “在源文档的DTD中。

连接四个数字a-b-c-d（在具有大碱基的数字系统中）给出了特异性。

对于选择器.navbar-default .navbar-nav>li>a，特异性为022，因为它有两个类选择器和两个元素类型（li，a）选择器作为其中的一部分。

而选择器.navbar-account > li > a的特异性仅为021，因为它只有1个类选择器和两个元素类型选择器作为其一部分。

因此，覆盖引导选择器中指定的属性的关键是使用比引导选择器更具体的选择器。如果我们将选择器更改为body .navbar-default .navbar-account > li a，则选择器的特异性变为023（高于引导选择器），因为它现在有2个类选择器和3个元素类型选择器，因此它获胜。

以这种方式更改选择器不会在其他地方引起任何其他问题，因为body始终是所有元素的父级，而.navbar-default是.navbar-account的父级。

注意：我们也可以使用.navbar-default .navbar-account > li a（不带body）但它的特异性是022，这与引导选择器相同，因此没有保证它总是得到应用。（这是在我看到this comment of yours之前编写的。如果slide-in-menu.css总是在bootstrap.min.css之后加载，那么这一点就足够了。）

另外，正如我在Scott Marcus' answer的评论中提到的那样，如果你想让引导样式仅被覆盖一页，那么他的回答是最好的方法。我的答案中提到的方法将覆盖所有页面。

Answer 2

只需在特定页面中重新定义该样式：

 <style>
        .navbar-default .navbar-nav>li>a { . . .}
 </style>

本地页面样式将覆盖链接的样式，但仅影响一页。

顺便说一句，这里有一个很好的资源来确定哪个选择器比另一个更具体：https://specificity.keegan.st/

Answer 3

如果您可以自由地在菜单中滑动更改CSS，那么以下代码说明了在同一CSS文件中的修改（考虑到您现有的HTML DOM和应用的类）：

.navbar-default .navbar-nav.navbar-account {
     /* apply whichever CSS style you want to apply */
 }

说明：

CSS遵循一个层次结构，其中应用了之前的CSS，因为＆＃39; .navbar-default＆＃39;是父母，然后它去了孩子，因为＆＃39; .navbar-nav＆＃39;是它的孩子。由于它包含两个类，因此它具有更高的优先级，而在后一个应用的css中，使用＆＃39; .navbar-account＆＃39;，其优先级低于另一个。

Answer 4

使用以下样式：

.navbar-account>li>a:first-child{
     color:#E84c4c;
}

Answer 5

  .navbar-account > li > a:active{
    #give your style
    }

Check this button

你可以使用此按钮在活动，悬停，焦点上显示你的风格。

如何更改CSS应用顺序

5 个答案: