为什么自定义样式不会覆盖以前定义的样式

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文件中容器宽度属性的最后一行。

编辑：添加了一个示例。
200像素，但是最大宽度将其限制为50像素，因为CSS从上到下运行。

要记住的另一件事是max-width 总是会覆盖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 个解决方案

解决方案1
0 2017-06-17 01:51:31

解决方案2
0 2017-06-17 06:27:06

为什么自定义样式不会覆盖以前定义的样式

问题描述

2 个解决方案

解决方案1 0 2017-06-17 01:51:31

解决方案2 0 2017-06-17 06:27:06

解决方案1
0 2017-06-17 01:51:31

解决方案2
0 2017-06-17 06:27:06