Question

我已经通过CDN加载了Bootstrap并且工作正常，我正试图覆盖<caption>标签的bootstrap默认大小和颜色样式。所以，我在我的stylesheets / 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>

即使在application.css清单文件之后列出了bootstrap，我在application.css中定义的font-size css选择器也会生效，但color选择器只有在我移动引导链接时才会起作用在应用程序清单链接之前？

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

Answer 1

Bootstrap css将标题定义为：

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

注意，那里没有font-size，但有color。

在css中，如果相同的属性在完全相同的选择器中定义多一次，则第二个定义将覆盖前一个。因此，如果您先在资产中定义color并稍后加载bootstrap，则bootstrap将覆盖您的定义。由于此选择器的引导程序中未使用font-size，因此顺序没有任何区别。

Answer 2

这就是CSS如何运作 - 如果两个规则具有相同的特异性，后者的规则总是胜利：

a.css

p { color: blue; }

b.css

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>

这就是为什么你总是把lib放在顶部而你的覆盖在下面。除非你想开始一场特异性战争......

Answer 3

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

现在，Bootstrap CSS没有定义标题颜色的字体大小，因此将大小放在CSS中的位置并不重要;它的大小是多少。但是，它确实定义了颜色，因此在这种情况下，样式的显示顺序很重要。最后一个优先。

Answer 4

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

Answer 5

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

标题{ font-size：150％; 颜色：＃000000！重要; }

希望能够快速为您效劳。

感谢

Bootstrap和自定义css，加载顺序误解

5 个答案: