覆蓋CSS和選擇器的數量

我想圍繞一些關於CSS的東西。我一直認爲包含CSS文件的順序很重要（它的「級聯」部分）。我正在使用Bootstrap 3，並試圖覆蓋活動的頂級導航鏈接的背景顏色。覆蓋CSS和選擇器的數量

確切的選擇我在爲了做到這一點使用的是：（實際上SCSS，但是這不應該的問題）

.navbar-default .navbar-nav > .active > a { 
    background: $sp-blue; 
    color: #fff; 
}

然後scss-lint對我大喊大叫具有適用性大於深度3.但是，如果我嘗試這樣做：

.navbar-nav > .active > a { 
    background: $sp-blue; 
    color: #fff; 
}

然後它停止工作。這是我不明白的。爲什麼我必須在選擇器中包含.navbar-default？如果.navbar-nav在裏面，我不需要那麼多。這是煩人的，必須複製精確選擇器，因爲它在以前的樣式表中使用。現在，如果我使用!important，那麼它有效，但我們都知道這是不好的做法。

有人能幫我把握這方面的CSS嗎？

來源

2014-11-03 CaptSaltyJack

你應該也可以使用'div.navbar-nav> div。active> a' - 其中「div」是類所附的元素。這應該給予更大的特異性。 – misterManSam 2014-11-03 01:30:44

我認爲「從不使用'重要的！'」是一個有點貨運難題，認爲重寫框架是使用它的完全有效的例子。 – steveax 2014-11-03 01:58:40

@steveax國際海事組織，必須使用'！important'意味着某人在某處沒有正確使用CSS。 – CaptSaltyJack 2014-11-03 03:56:58

這是因爲.navbar-default .navbar-nav > .active > a比.navbar-nav > .active > a更具體。

雖然樣式表的順序有關於瀏覽器如何分析哪些css更相關，CSS特性也起了一定的作用。

基本上，CSS選擇器越具體，瀏覽器就越相關。比方說，我們已將您的CSS命令如下：

/*this will be followed*/ 
.navbar-default .navbar-nav > .active > a { 
    background: #fff; 
} 

/*this will be ignored*/ 
.navbar-nav > .active > a { 
    background: #000; 
}

雖然第二選擇是排在最後，它不能覆蓋以前的選擇，只是因爲它有一個較弱的特異性。它只能在與前一個CSS具有相同或更大的特異性時才能覆蓋另一個CSS。但當然，!important是該規則的一個例外。

延伸閱讀：http://css-tricks.com/specifics-on-css-specificity/

來源

2014-11-03 01:01:04 Pau

這是一個奇妙的問題！這表明你實際上在思考CSS，而不是數以百萬計的新手，他們不問，只是「重要」！每當出現問題時。但你是完全正確的。據說寫得很好的CSS有以下約束：

不要使用'重要！ '重要！'打破級聯性質的CSS，並打開您的設計與維護和簡單的問題：參見：What are the implications of using "!important" in CSS?

避免出於同樣的原因爲「重要的大型「適用性的深度」！「這又導致了設計，是不是維護，簡單，否則容易重新設計：參見：https://smacss.com/book/applicability

不要修改框架代碼當然，你不應該回去和修改框架的CSS 。如果您以後需要更新此代碼，或者某個自動過程將其覆蓋，該怎麼辦？您的代碼中斷。

一個解決方案（如果你相信以上）是使用CSS規則他們自身和目標的元素更有效的方式。使用CSS特異性計算器像這樣的：

http://specificity.keegan.st/

我們可以看到其他的方式來定位元素更好。根據計算器，你的元素的特異性是0031.但是，單個ID

#mynav { 
    background: $sp-blue; 
    color: #fff; 
}

得分0100並且將滿足上述約束條件。一個問題是，也有人說......

不要使用標識出於類似的原因爲上述：參見：http://oli.jp/2011/ids/

我們也可以使用「內嵌式」（你可以從計算器），但是看....

不要使用內聯樣式What's so bad about in-line CSS?

那麼有沒有其他方法可以1）增加特異性2）不增加深度，不使用3）ID 4）'重要！' 5）內聯樣式，或6）修改你的框架代碼？通過將多個類分配給一個元素（或父元素），我們可以在不增加適用性深度的情況下提高特異性。當然，這也將工作

.thislink1.thislink2.thislink3.thislink4 { 
    background: $sp-blue; 
    color: #fff; 
}

現在，當然，你不必分配4個不同的類別，以你的錨只是非常具體，或者讓你的深度小於3.如果您分配一個類給父母

.navbar-nav.mynav > .active.myactivelink { 
    background: $sp-blue; 
    color: #fff; 
}

這個分數是0040（2的深度）。如果你確信你的css修改是最後加載的（因爲後面加載的規則優先），你可以進一步簡化它。

.navbar-nav > .active > a.mylink { 
    background: $sp-blue; 
    color: #fff; 
}

這個得分0031（帶深度爲3），喜歡你的引導CSS，但如果它的引導加載後會被應用。

外賣：CSS是不是由專家研究，以量化的指標，如圈複雜度和代碼質量的計算機語言，這是不客觀的措施多嚴格的研究樣式表語言。很容易知道，你有許多沒有經驗的骨架和更多不好的建議，而不是確鑿的證據。我當然不是專家，所以把上述作爲'選項'。意識到這種風格對於從其他人遭受的陷阱中學習很重要。但是，您的具體情況包括您的偏好和您所處的開發環境類型，以及學習所有這些建議需要多長時間。

來源

2015-03-01 01:02:57 Joe

覆蓋CSS和選擇器的數量

回答

相關問題