2015-09-10 98 views
1

類選擇器的特異性爲10.如果我要編寫11個html類型選擇器的選擇器,它會覆蓋類選擇器嗎?11種類型選擇器是否重寫類選擇器?

.some {color: green} 
div div div div div div div div div div div {color: red} 

將應用什麼顏色?

101類選擇器會覆蓋ID選擇器嗎?

PS。當然,我可以用類重寫類型選擇器來嘗試自己,但是使用id選擇器做同樣的事也很麻煩。

+0

解釋,你在說什麼 – Tushar

+0

@Tushar,添加例如 –

+0

[看自己(https://jsfiddle.net/tusharj/u6odb08v/) – Tushar

回答

2

我覺得可能是誤解你的問題上的「特異性10」這不是'9 + 1',它是一個完全不同的東西,更像是一個列表「0 ids,1 class,0 tags」,你可以有「0 ids,0 class,11 tags」,它不會不改變事實,你仍然不像一個班級那麼強大。

因此,更清楚地寫它,你就會有(0,1,0)和(0,0,11)等

3

在您的例子中,10特異性.some高於11在多個選擇...

這是因爲class具有比選擇更高的特異性。 所以「測試」文本將是綠色

例子:

------------------------------------------------ 
|Inline |  | Classes, | Elements | 
|styles | IDs |attributes and|  and  | 
|  |  |pseudo-classes|pseudo-elements| 
------------------------------------------------ 

.some {color:green} 
------------------------------------------------ 
| 0 | 0 |  1  |  0  | 
------------------------------------------------ 
div div div div div div div div div div div {color:red } 
------------------------------------------------ 
| 0 | 0 |  0  |  11  | 
------------------------------------------------ 
div div div div div div div div div div div.some {color:blue } 
------------------------------------------------ 
| 0 | 0 |  1  |  11  | 
------------------------------------------------ 

所以在短暫.... 0-0-1-110-0-1-0更高,這是高於0-0-0-11

.some { 
 
    color: green 
 
} 
 
div div div div div div div div div div div { 
 
    color: red 
 
} 
 
div div div div div div div div div div div.txt { 
 
    color: blue 
 
}
<div> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     <div> 
 
      <div> 
 
      <div> 
 
       <div> 
 
       <div> 
 
        <div> 
 
        <div class="some"> 
 
         test 
 
        </div> 
 
        <div class="txt"> 
 
         test 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

1

因爲你不應該閱讀的特異性爲10

通常可以讀取這些值,就好像它們只是一個數字一樣,例如1,0,0,0是「1000」,因此顯然勝過0,1,0,0或「100」的特異性, 。逗號在這裏提醒我們,這不是一個真正的「基礎10」系統,因爲你可以在技術上具有像0,1,13,4這樣的特異性值 - 並且「13」不會像一個基地10系統會。

CSS將大量不同的特異性權重應用於類和ID。事實上,一個ID具有無限多的特異性值!也就是說,沒有一個班級可以超過一個ID。

See this article