引導和自定義CSS，加載順序的誤解

我有Bootstrap加載和工作都很好，通過CDN，我試圖覆蓋<caption>標記引導程序的默認大小和顏色樣式。所以，我放了一些在CSS樣式表我/ 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清單文件後上市在application.css中定義的font-size css選擇器確實生效，但color選擇器僅在我在應用程序清單鏈接之前移動引導鏈接時才起作用。

爲什麼一個選擇器可以工作而不是另一個選擇器，那麼做這件事的正確方法是什麼？提前致謝。

來源

2015-10-18 jbk

是的 - 你必須在bootstrap.css之後有application.css文件，或者你可以使用！重要的規則，而不必關心CSS文件的順序，但不建議這樣做。 – makshh

如果您決定使用'！important'，則會出現警告信息 - 如果您不得不向團隊中添加新的開發人員，並且這位新開發人員對css有很好的理解，請使用'！重要的'可能會導致你的頭部嚴重受傷。 – BroiSatse

引導CSS定義標題爲：

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

注意，沒有font-size有，但有color。

在CSS中，如果相同的屬性在完全相同的選擇器中定義多於一次，則第二個定義會覆蓋前一個。因此，如果您先在資產中定義color，稍後您將加載bootstrap，則bootstrap將覆蓋您的定義。由於font-size未用於此選擇器的引導程序，因此順序沒有任何區別。

來源

2015-10-18 19:55:34 BroiSatse

啊，我明白了！我現在明白了，謝謝你的幫助。什麼是我自己的自定義樣式表的正確方法設計來覆蓋引導樣式，在;命名，位置以及如何在各種自定義樣式表之間拆分樣式，以等待其預期的操作。 – jbk

如果您想覆蓋庫中定義的樣式，正確的方法是將自己的樣式表放在庫的樣式表後面，正如您注意到的那樣。

現在Bootstrap CSS沒有定義字幕顏色字體大小，所以它沒有關係你把尺寸放在CSS中的位置;這是它需要的尺寸。但是，它確實定義了顏色，所以在這種情況下，樣式顯示的順序非常重要。最後一個優先。

來源

2015-10-18 19:57:02

那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>

這就是爲什麼你總是把libs放在頂部並覆蓋底下的原因。這是除非你想開始特異性戰爭...

來源

2015-10-18 19:57:30 max

在引導CSS ..後，使用自定義樣式的CSS最後，寫過標題樣式。希望它能解決你的問題

來源

2015-10-18 19:59:59 CreativePS

引導和自定義CSS，加載順序的誤解

回答

相關問題