Question

我正在开发一个网页，首先添加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 class="nav-md">
  <div class="container body">....</div>
</body>

可能有什么问题？

Answer 1

CSS文件从上到下加载。
第1245行将是更改bootstrap.css文件中容器宽度属性的最后一行。

编辑：添加了一个示例。
200px但最大宽度将其限制为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>

Answer 2

您在底部编写的CSS会覆盖以前编写的CSS。

将！important 与css一起使用，为其提供更多优先权。

使用层次结构获得最高优先级：

.Parent1>.Parent2>.container

自定义样式不会覆盖先前定义的样式的原因

2 个答案: