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

我正在开发一个网页，该网页添加第一个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%; 
}

当运行应用程序，风格的1245线bootstrap.css控制宽度。当我禁用它时，使用第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>

什么可能是错误的？

来源

2017-06-17 jstuardo

您好..覆盖您的自定义CSS最大宽度属性..并给予一试。设置最大宽度：100％; –

是的..这工程..但我想知道为什么在我给了链接的网站，custom.css的作品没有定义最大宽度 – jstuardo

嗨..在gird.less文件中的容器有宽度属性和bootstrap.css有最大宽度属性。这就是当“宽度”在该网站工作时被覆盖的原因。在这里你需要重写max-width属性。 ...希望这会有所帮助.. –

一个CSS文件从顶部到底部加载。
1245行将成为更改bootstrap.css文件中容器宽度属性的最后一行。

编辑：增加了一个例子。
200px，但由于CSS从上到下运行，但最大宽度限制为50px。

要记住的另一件事是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>

来源

2017-06-17 01:51:31

是否意味着CSS处理器逐行加载所有CSS文件，将它们存储在某种缓冲区中，最后，最后一行中的定义是否被使用？这对我来说听起来并不合逻辑。过程应该按照它们出现在CSS文件中的样式定义，使用相同的顺序。 – jstuardo

@jstuardo CSS规范指出，以后的规则总是会覆盖具有相同特征和目标的早期规则。 – Li357

@jstuardo我添加了一个例子来与我的答案。查看代码片段。 –

你写在底部的CSS将覆盖先前写CSS。

使用！重要的用CSS来给它更优先。

为最高优先级的等级制度：

.Parent1>.Parent2>.container

来源

2017-06-17 06:27:06 Tal

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

回答

相关问题