gpt4 book ai didi

html - 自定义 css 不会覆盖第一个 css 文件中的属性

转载 作者:行者123 更新时间:2023-11-28 00:07:05 25 4
gpt4 key购买 nike

我正在使用 Bootstrap ,但我想更改周围的一些颜色(导航栏和按钮)。我有一个未修改的 bootstrap.css 和一个 custom.css,它更改了我想要从默认更改的所有属性。

在我的 index.html 中,我链接了默认的 Bootstrap ,然后是自定义的 css 文件。

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

我是网络新手,但我的理解是样式表按照它们链接的顺序相互添加。但是当我在浏览器中打开它时,它没有使用 custom.css 中指定的任何更改。我的理解是错误的,还是我只是错误地处理了这个问题?

编辑:原始导航栏内部(bootstrap.css)

.navbar-inner {
min-height: 40px;
padding-right: 20px;
padding-left: 20px;
background-color: #fafafa; /* #fafafa */
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); /*#f2f2f2 */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: repeat-x;
border: 1px solid #d4d4d4;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

在 custom.css 中修改了一些属性的 navbar-inner

.navbar-inner {
background-image: -moz-linear-gradient(top, #002f6c, #002f64);
background-image: -ms-linear-gradient(top, #002f6c, #002f64);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#002f6c), to(#002f64));
background-image: -webkit-linear-gradient(top, #002f6c, #002f64);
background-image: -o-linear-gradient(top, #002f6c, #002f64);
background-image: linear-gradient(top, #002f6c, #002f64);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'002f6c, endColorstr='#'002f64, GradientType=0);
}

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Test</a>
<ul class="nav pull-right">
<li class="pull-right"><a href="about.html">About</a></li>
<li class="pull-right"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>

第一个 div 类是否也需要更改? (他们不是)

我用了this tool生成 custom.css 文件。

最佳答案

CSS 样式按应用顺序堆叠的说法不一定正确。 CSS 按重要性或特殊性顺序应用。

例如,考虑以下 HTML:

<ul id="testList">
<li>Some data</li>
</ul>

如果您的第一个文件有 CSS:

ul#testList { color: #f00; }

你的第二个文件有:

ul { color: #00f; }

然后您的第一个文件具有更多的特异性,即使第二个文件在您的标记中排在第二位。第一种样式在声明中更加精确。

但是,如果您将第二个样式更改为具有匹配的特异性,那么您的第二个声明将覆盖第一个。希望这对您有所帮助!

关于html - 自定义 css 不会覆盖第一个 css 文件中的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17947036/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com