對CSS選擇器權重的認識 親測

2022-09-22 01:21:08 字數 1112 閱讀 2668

複製**

**如下:

複製**

**如下:

test of css

以上例子,最終的顯示效果是 font-size: 16px,並不是後面的font-size: 14px;

這種組合的選擇器有快速方法判斷:

0,0,0,0

第一位數值是代表寫在標籤上的樣式,如

複製**

**如下:

第二位數值代表的是id選擇器,如 #demo {}

第三位數值是代表: 類名( .demo {} )或 偽類(:hover)或 屬性選擇器[rel=&rdwww.cppcns.comquo;xx」]

第四位數值是代表:標籤選擇器 p {} inwxpi

現在用第乙個例子來實踐下:

複製**

**如下:

div.ui_infor p

它的權重是:0,0,1,2

複製**

**如下:

.ui_infor p

它的權重是:0,0,1,1

結果:0,0,1,2 > 0,0,1,1,所以顯示font-size: 16px;

補充:! important權重是最高的,所以就不用判斷了,但在ie-6瀏覽器中點bug。

例子:

複製**

**如下:

p 在ie-6瀏覽器裡面,是顯示font-size: 12px,網上有些資料說ie-6不支援!important,其實是不對的。 www.cppcns.com

我們在看看例子:

複製**

**如下:

p p 在ie-6中是顯示font-size: 18px,這就說明了ie-6是支援!important,只是表現有點怪異,怪異的地方就是:寫在同行的同名樣式中 !important的屬性被後面的覆蓋,

就如 p 這個例子,font-size: 12px覆蓋了font-size: 18px !important。

利用這個怪異,就可以在ie-6中,不使用css_hack,實現「min-height」

複製**

**如下:

p 本文標題: 對css選擇器權重的認識(親測)

本文位址:

css選擇器 權重

基礎選擇器 一 標籤選擇器 p h1 css不區分大小寫,建議小寫 1 所有的標籤都可以作為標籤選擇器去使用 2 無論這個標籤藏多深,一定能夠被選上 3 選擇頁面所有的,而不是具體某乙個 標籤選擇器,選擇的是頁面上所有這種型別的標籤,所以經常描述 共性 無法描述某乙個元素的 個性 的。二 id選擇器...

CSS選擇器權重問題

原則一 繼承不如指定 原則二 id class 標籤選擇符 原則三 越具體越強大 原則四 標籤 id id 標籤.class class css優先順序包含四個級別 標籤內選擇符,id選擇符,class選擇符,元素選擇符 以及各級別出現的次數 根據這四個級別出現的次數計算得到css的優先順序。css...

css選擇器權重介紹

選擇器與偽元素的權重情況 高權重的選擇會覆蓋低權重的展示樣式 選擇器表示式或示例 說明權重 行內選擇器 style 1000 id選擇器 aaa 100類選擇器 aaa 10標籤選擇器 h1元素的tagname 1屬性選擇器 img alt div class pus 10相鄰選擇器 selecte...