我正在开发一个网页，首先添加 bootstrap.css，然后添加 custom.css。这两个 CSS 文件都定义了一个名为 .container 的样式，这样:
bootstrap.css:
container { /* line 1245 */
max-width: 1170px;
}
.container { /* line 1082 */
max-width: 970px;
}
.container { /* line 928 */
max-width: 750px;
}
.container { /* line 759 */
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
在 custom.css 中:
.container {
padding: 0;
width: 100%;
}
运行应用程序时，bootstrap.css 第 1245 行的样式控制宽度。当我禁用它时，使用第 1082 行中的样式。最后，当我禁用它时，将使用第 928 行中的样式。当我禁用后者时，将使用 custom.css 中的定义。
但是，此页面中的结构和 CSS 相同:https://colorlib.com/polygon/gentelella/index.html .在此页面中，相同的定义有效。
请不要建议在 custom.css 中使用 !important，因为如果上面链接中的相同结构有效，则意味着其他地方有问题。
如果你很好奇，这就是我包含 CSS 文件的方式:
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/font-awesome.css" rel="stylesheet"/>
<link href="/Content/nprogress.css" rel="stylesheet"/>
<link href="/Content/iCheck/flat/green.css" rel="stylesheet"/>
<link href="/Content/daterangepicker.css" rel="stylesheet"/>
<link href="/Content/custom.css" rel="stylesheet"/>
这是 body 的一部分:
<body class="nav-md">
<div class="container body">....</div>
</body>
可能出了什么问题？
最佳答案
好吧，CSS 文件从上到下加载。
第 1245 行将是更改 bootstrap.css 文件中容器宽度属性的最后一行。
编辑:添加了一个示例。
200px 但 max-width 将其限制为 50px，因为 CSS 从上到下运行。
要记住的另一件事是 max-width 将始终覆盖 width 无论它是否在它之前。
.one {
width: 50px;
height: 100px;
background-color: lightblue;
display: inline-block;
}
.two {
width: 100px;
height: 100px;
background-color: lightgreen;
display: inline-block;
}
.three {
width: 150px;
height: 100px;
background-color: lightgray;
display: inline-block;
}
.container {
width: 200px;
height: 100px;
background-color: violet;
display: inline-block;
}
.container { /* line 26 */
max-width: 150px;
}
.container { /* line 29 */
max-width: 100px;
}
.container { /* line 32 */
max-width: 50px;
}<div class="one"><p>50px</p></div>
<div class="two"><p>100px</p></div>
<div class="three"><p>150px</p></div>
<div class="container"><p>50px</p></div>关于html - 为什么自定义样式不会覆盖以前定义的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44600021/