html - 如何轻松覆盖 Bootstrap CSS

Question

我想问一下，为什么在 custom.css 中需要使用 !important 来覆盖 bootstrap.css 中的一些样式
比如: 输入、按钮、导航栏等

例如:

.navbar{
 background :#52B3D9;
 border-radius:0px !important;
 border-top:4px solid #1E8BC3 !important;}

不使用 !important?

也可以覆盖 bootstrap.css

Answer 1

您需要编写一个比您正在覆盖的选择器更具体的选择器(或同样具体但稍后)。

A selector's specificity is calculated as follows:

• count the number of ID selectors in the selector (= a)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
• count the number of type selectors and pseudo-elements in the selector (= c)
• ignore the universal selector
• Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.