以下哪項在CSS更高的特異性？

我學習CSS選擇器的特殊性和遇到下面的例子。我無法弄清楚，哪個CSS選擇器對另一個CSS具有更高的特異性？以下哪項在CSS更高的特異性？

1例：

p#largetext 
body p#largetex

2.舉例：

p.largetext ul li  
p ul li a

CSS的特異性是如何工作的一個比另一個？爲什麼一個更高，一個更低？

來源

2016-01-21 Maihan Nijat

我喜歡[本文]（https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#how-to-measure-specificity）將其分解。 – chinaowl

[這裏]（https://specificity.keegan.st/）是一個計算器，您可以使用它計算兩個不同選擇器之間的特異性。另外，[here]（http://vanseodesign.com/css/css-specificity-inheritance-cascaade/）是學習CSS引擎如何計算特異性的好資源。 – War10ck

在你的第一個例子中，具有'body'的那個優先。我認爲這是因爲它是最特別的類型。第二個例子將代表無效的HTML。 –

你的問題是由CSS3 selectors, W3C Recommendation回答：

9.計算選擇的特異性

一個選擇的特異性爲計算如下：

計數選擇器中ID選擇器的數量（= a）

計數選擇器中類選擇器，屬性選擇器和僞類的數量（= b）

計數類型選擇器的數量和僞選擇器的數量在選擇器元件（= C）

忽略通用選擇否定僞類內

選擇器進行計數像任何其他，但否定本身不能算作一個僞類。

串接三個數字的A-B-C（在一些系統具有大基）給出的特異性。

隨着你的例子有：

1）p#largetext有1,0,1（1號，1型）特異性

body p#largetex有1,0特異性， 2（1號，2種）

2）p.largetext ul li具有0,1,3特異性（1類，3種）

p ul li a的特異性爲0,0,4（4種）

要獲得特定值，必須連接3個數字。因此，例如1，第二選擇器更具體102> 101並且例如2，第一選擇器更具體13> 4。

來源

2016-01-21 19:20:34

在這兩種情況下，第二行的特異性較高？ –

不，對於第二個例子，第一個選擇器具有更高的特異性13> 4。 –

在你的第一個例子，因爲它更具體的第二行會優先於第一。你的第二個例子實際上是針對兩個不同的元素，所以根據你想要的，它會做兩件不同的事情。如果兩個規則共享相同的優先級，那麼它將取決於規則本身的排序。

您可以在MDN查看完全崩潰：Specificity - CSS | MDN

來源

2016-01-21 19:16:04 michael

特異性是基於選擇器計算出的權重。下面是更具體到不太具體的元素的列表。！

重要
inline聲明
ID選擇
類選擇，屬性選擇例如：[名稱= 「電子郵件」]，或僞clases例如：（：懸停）
類型選擇器例如：div，h2，img

如果兩個選擇器的特異性相同，則將應用latets規則。

來源

2016-01-21 19:22:45

以下哪項在CSS更高的特異性？

回答

相關問題