引导和自定义css，加载顺序错误_Css_Ruby On Rails_Twitter Bootstrap

引导和自定义css，加载顺序错误

css ruby-on-rails twitter-bootstrap

引导和自定义css，加载顺序错误,css,ruby-on-rails,twitter-bootstrap,Css,Ruby On Rails,Twitter Bootstrap,我已经通过CDN加载了引导，并且工作正常，我正在尝试覆盖标记的引导默认大小和颜色样式。因此，我在样式表/application.css文件中放置了一些css： caption { font-size: 150%; color: #000000; } 我的application.html.rb头部如下所示： <head> <title>Odot2</title> <meta name="viewport" content="width=

我已经通过CDN加载了引导，并且工作正常，我正在尝试覆盖

标记的引导默认大小和颜色样式。因此，我在样式表/application.css文件中放置了一些css：

caption {
  font-size: 150%;
  color: #000000;
 }

我的

application.html.rb

头部如下所示：

<head>
  <title>Odot2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= csrf_meta_tags %>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>


Odot2
正确%>
正确%>

即使引导列在application.css清单文件之后，我在application.css中定义的

font-size

css选择器也会生效，但是

color

选择器只有在我将引导链接移到应用程序清单链接之前时才会起作用

为什么一个选择器工作而另一个不工作？正确的方法是什么？提前感谢。

引导css将标题定义为：

caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
}

注意，这里没有

字体大小

，但有

颜色

在css中，如果在完全相同的选择器中多次定义相同的属性，则第二个定义将覆盖前一个定义。因此，如果您首先在资产中定义

color

，然后加载

bootstrap

，则bootstrap将覆盖您的定义。由于此选择器的引导过程中未使用

font size

，因此顺序没有任何区别

如果要覆盖库中定义的样式，正确的方法是将您自己的样式表放在库的样式表之后，正如您所注意到的

现在，引导CSS没有定义标题颜色字体大小，因此将大小放在CSS的何处并不重要；这就是它需要的尺寸。但是，它确实定义了颜色，因此在这种情况下，样式的显示顺序很重要。最后一条优先。

这就是CSS的工作原理-如果两条规则具有相同的特异性，则后一条规则总是获胜：

a、 css

b、 css


我是红色的

这就是为什么您总是将LIB放在顶部，而将覆盖放在下面。除非你想开始一场特殊性战争…

在引导CSS之后，最后使用自定义样式CSS。它将覆盖标题样式。希望它能解决您的问题

只需在css属性值中添加重要内容，即可覆盖默认的引导css

标题{ 字体大小：150%； 颜色：#000000！重要； }

希望这将是快速和工作为您好

谢谢

是的-您必须在bootstrap.css之后使用application.css，否则您可以使用！重要规则，不关心CSS文件的顺序，但不建议这样做。如果您决定使用

，请警告！重要信息

-如果您必须向团队中添加一名新开发人员，并且该新开发人员对css有很好的理解，请使用

！重要提示

可能会导致头部严重受伤。啊，我明白了，当然！我现在明白了，谢谢你的帮助。我自己设计的自定义样式表在以下方面覆盖引导样式的正确方法是什么：；命名、位置以及如何在各种自定义样式表之间拆分样式，以等待它们的预期操作。

p { color: blue; }

p { color: red; }

<html>
  <head>
    <link rel="stylesheet" href="a.css">
    <link rel="stylesheet" href="b.css">
  </head>
  <body>
    <p>I'm red</p>
  </body>
</html>