CSS权重问题

来源：2-7 作业题

RogerLeung

2018-05-07 20:05:50

<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/css.css">

像上述这样引入两个CSS文件的话，是不是下面一个文件的CSS会覆盖上面的？

那如果下边的CSS某几行的权重不及上边的呢？举例：

假如bootstrap.css里面有这样一行代码：

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}

css.css有这么一行代码：

.navbar-nav > li > a:focus {
    color: #abcdef;
}

css.css能生效吗？

PS：产生这个问题是因为发现使用bootstrap定制导航条的字体颜色十分麻烦，不能直接用

.navbar-default{
    color: white;
}

实现，而尝试很多遍后想进一步提问……

写回答

1回答

好帮手慕星星

2018-05-08

已采纳

引入两个样式文件，遇到对相同元素设置样式的时候，还是看权重，不会直接覆盖，权重高的会显示，如果权重一样，后面的会覆盖前面的。想要改变bootstrap里面的样式，可以把里面的选择器前缀，例如：

.navbar-default .navbar-nav > li > a:hover{}

给粘贴下来，在自己写的css.css样式中进行修改即可，建议不要直接在bootstrap里面改变。

自己测试下，祝学习愉快~~

hogerLeung

h 非常感谢！

h018-05-08

共1条回复

0 学习 · 5012 问题

相似问题

回答 1

回答 1

回答 2

回答 1

回答 2