导轨中的 CSS 放置问题（使用引导程序）答案

【问题标题】：Issue with css placement in rails (using bootstrap)导轨中的 CSS 放置问题（使用引导程序）
【发布时间】：2023-03-30 15:55:01
【问题描述】：

假设我们在 stylesheets/myFilename.css.scss 中有以下内容：

...

.carousel-control.left, .carousel-control.right {
    background-image: none;
}

...

除非我将其修改为：

...

.carousel-control.left, .carousel-control.right {
    background-image: none !important;
}

...

但是，如果我没有将 css 放在 stylesheets 文件夹中，而是将其直接放入 myfile.html.erb，则不需要 !important。我该如何解决这个问题？

我认为它与样式表中 css 的排序/组合有关，但我不确定。如果有人能提供一些启示，那就太好了。

【问题讨论】：

【解决方案1】：

这是因为 CSS 具有遵循的级联层次结构。在你的情况下：

内部样式表的优先级高于外部样式表，因此如果您直接在 html 中声明它，您将不再需要 !important 来覆盖导致此冲突的任何其他外部样式表。

进一步阅读 css 层次结构和特殊性：

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ http://www.w3schools.com/css/css_howto.asp

如果您在外部样式表中需要 !important，这意味着您在其他地方有 css 冲突。在你的选择器中更具体总是比使用 !important 更好，所以你可以这样做：

/*Use an ID in your html*/
#my_id .carousel-control.left, #my_id .carousel-control.right {
   background-image: none;
}

【讨论】：

【解决方案2】：

您应该在主样式表之后添加您的样式表/myFilename.css.scss 文件。假设，你所有的 css 样式都来自 styleshees/style.css

现在您应该在索引或关联头文件中写 (stylesheets/myFilename.css.scss) 之后 (styleshees/style.css)。

例子，

<link rel="stylesheet" type="text/css" href="/styleshees/style.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">

不是

<link rel="stylesheet" type="text/css" href="/stylesheets/myFilename.css.scss">
<link rel="stylesheet" type="text/css" href="/styleshees/style.css">

【讨论】：