国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS選擇器

張金寶 / 2047人閱讀

摘要：基本選擇器選擇器含義版本優先級通用元素選擇器匹配任何元素標簽元素選擇器匹配所有使用標簽的元素選擇器匹配所有屬性中包含的元素選擇器匹配所有屬性中等于的元素其中中的第一位表示是否是內聯的意思是則為不是為多元素的選擇器組合選擇器含義版本優先級群組

基本選擇器
選擇器 含義 CSS版本 優先級
* 通用元素選擇器,匹配任何元素 2 0,0,0,0
E 標簽(元素)選擇器,匹配所有使用E標簽的元素 1 0,0,0,1
.class1 class選擇器,匹配所有class屬性中包含class1的元素 1 0,0,1,0
#id1 id選擇器,匹配所有id屬性中等于id1的元素 1 0,1,0,0

其中,0,1,0,0中的第一位表示是否是內聯的意思,是則為1,不是為0

多元素的選擇器組合
選擇器 含義 CSS版本 優先級
E,F 群組選擇器,同時匹配E,F元素,元素之間用,隔開 1 權重相加
E F 后代元素選擇器,匹配所有屬于E元素后代的F元素,元素之間用空格隔開 1 權重相加
E>F 子元素選擇器,匹配所有E元素的子元素F 2 權重相加
E+F 相鄰同胞選擇器,匹配所有緊隨E元素之后的同級F元素 2 權重相加
E~F 同級元素通用選擇器,匹配任何在E元素之后的同級F元素 3 權重相加
屬性選擇器
選擇器 含義 CSS版本 優先級
E[attr] 匹配所有具有attr屬性的E元素 2 0,0,1,0
E[attr=val] 匹配所有attr屬性等于"val"的E元素 2 0,0,1,0
E[attr~=val] 匹配所有attr屬性具有多個空格分隔的值,其中一個值等于"val"的E元素 2 0,0,1,0
E[attr|=val] 匹配所有attr屬性具有多個連字號(-)分隔的值,其中一個值以"val"開頭的E元素 2 0,0,1,0
E[attr^="val"] 屬性attr的值以"val"開頭的元素 3 0,0,1,0
E[attr$="val"] 屬性attr的值以"val"結尾的元素 3 0,0,1,0
E[attr*="val"] 屬性attr的值包含"val"字符串的元素 3 0,0,1,0
偽類選擇器
選擇器 含義 CSS版本 優先級
E:link 匹配所有未被點擊的鏈接 1 0,0,1,0
E:visited 匹配所有已被點擊的鏈接 1 0,0,1,0
E:active] 匹配鼠標已經激活還沒有釋放的E元素 1 0,0,1,0
E:hover 匹配鼠標懸停其上的E元素 1 0,0,1,0
E:lang(language) 匹配lang屬性等于language 2 0,0,1,0
E:focus 匹配獲得當前焦點的E元素 2 0,0,1,0
E:first-child 匹配父元素的第一個子元素 2 0,0,1,0

CSS3中偽類,比如:hover寫為::hover,這是為了與偽元素作區分,為了支持舊版的網站,以前的單引號偽類還有效

與用戶界面有關的偽類
選擇器 含義 CSS版本 優先級
E:enabled 匹配表單中激活的元素 3 0,0,1,0
E:disabled 匹配表單中禁用的元素 3 0,0,1,0
E:checked 匹配獲得當前焦 3 0,0,1,0
結構性偽類
選擇器 含義 CSS版本 優先級
E:root 匹配文檔的根元素,對于HTML文檔,就是HTML元素 3 0,0,1,0
E:nth-child(n) 匹配其父元素的第n個子元素,第一個編號為1 3 0,0,1,0
E:nth-last-child(n) 匹配其父元素的倒數第n個子元素,第一個編號為1 3 0,0,1,0
E:nth-of-type(n) 與:nth-child()作用類似,但是僅匹配使用同種標簽的元素 3 0,0,1,0
E:nth-last-of-type(n) 與:nth-last()作用類似,但是僅匹配使用相同標簽的元素 3 0,0,1,0
E:last-child 匹配父元素的最后一個子元素,等同于:nth-last-child(1) 3 0,0,1,0
E:first-of-type 匹配父元素下使用同種標簽的第一個子元素,等同于:nth-of-type(1) 3 0,0,1,0
E:last-of-type 匹配父元素下使用同種元素的最后一個子元素,等同于:nth-last-of-type(1) 3 0,0,1,0
E:only-child 匹配父元素下僅有的一個子元素,等同于:first-child:last-child或:nth-child(1):nth-last-child(1) 3 0,0,1,0
E:only-of-type 匹配父元素下使用同種標簽的唯一一個子元素,等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1) 3 0,0,1,0
E:empty 匹配一個不包含任何子元素的元素,注意,文本借點也被看作子元素 3 0,0,1,0
反選偽類
選擇器 含義 CSS版本 優先級
E:not(selector) 匹配非當前選擇起的任何元素 3 0,0,0,0
target偽類
選擇器 含義 CSS版本 優先級
E:target 匹配文檔中特定"id"點擊后的效果 3 0,0,1,0
偽元素
選擇器 含義 CSS版本 優先級
E:first-line 匹配E元素的第一行 2 0,0,0,1
E:first-letter 匹配E元素的第一個字母 2 0,0,0,1
E:before 在E元素之前插入生成的內容 2 0,0,0,1
E:after 在E元素之后插入生成的內容 2 0,0,0,1
E::selection 匹配用戶當前選中的元素 3 0,0,0,1
E::placeholder 控制表單輸入框占位符的外觀,瀏覽器暫時不支持 3 0,0,0,1
Selectors Level 4

暫略

Selectors Level 4
Selectors Level 4草案
CSS4 Rocks

CSS選擇器,優先級與匹配原理

瀏覽器通過優先級來判斷哪一些屬性應該應用到一個元素上.優先級就是分配給指定的CSS聲明的一個權重,它由匹配的選擇器中的每一個選擇器類型的值來決定.

選擇器的權重(特殊性)升序排列:

繼承

通用元素

標簽|偽元素

類|屬性|偽類

ID

內聯樣式

!important

所有的選擇器權重都是通過相加計算,大的優先;如果權重一樣大,后定義的優先.

此外,優先級還要考慮到CSS樣式的來源,樣式表可能有三種不同的來源:作者,用戶和客戶端,按升序排列:

客戶端聲明(UA declarations)

一般用戶聲明(user normal declarations)

一般作者聲明( author normal declarations )

加了 "!important" 的作者聲明( author important declarations )

加了 "!important" 的用戶聲明( user important declarations )

當擁有相同重要性和來源,按照CSS特殊性來排序.引用的樣式表(@import )中的規則被認為出現在樣式表本身的所有規則之前,在@charset之后
!important

使用!important可以覆蓋任何其它沒有使用!important的規則,在IE6時代!important多用來hack,不過現在不建議使用,除非需要在外部css文件中提升優先級

一些Demo :not反轉偽類

:notDemo

這里明顯可以看出,:not不參與權重計算

基于形式的優先級

選擇器的形式

由此可見,屬性選擇器里面的選擇器不參與權重計算,它的權重只是屬性選擇器的權重

關于后代元素選擇器

后代元素選擇器

對于后代元素選擇器來說,祖先選擇器跟每個后代元素的距離都是一樣的.在這個例子中,由于優先級一樣,所以后面的.red p覆蓋前面的.green p

覆蓋之前:

1.顏色是? 綠色
2.顏色是? 紅色
3.顏色是? 紅色
4.顏色是? 綠色

覆蓋之后:

1.顏色是? 紅色
2.顏色是? 紅色
3.顏色是? 紅色
4.顏色是? 綠色

相關參考:
優先級
KB005: CSS 層疊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116437.html

相關文章

  • WEB前端 CSS

    摘要：后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器。后代選擇器后代選擇器標簽選擇器后跟標簽后代，無論直屬還是間接直屬，直接后代毗鄰后代中最近的一個弟弟，找到和自己同級的標簽如通過多個選擇器好到具體的標簽。目錄 WEB前端 CSS WEB前端 CSS TOC CSS簡介 CSS引入方式 CSS結構 CSS選擇器 標簽選擇...

    darry 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...

    forrest23 評論0 收藏0

  • 編寫高效的 CSS 選擇器 – CSS魔法

    摘要：最基本的選擇器是元素選擇器比如選擇器比如還有類選擇器比如。選擇器和類選擇器在速度上的差異基本上沒有關系。現在我們回到討論開始的地方，哪類選擇器是最高效的哪個是會影響選擇器效率的關鍵選擇器寫代碼的時候，關鍵選擇器是能否高效的決定因素。 高效的CSS已經不是一個新的話題了，也不是我一個非得重拾的話題，但它卻是我在工作之時，所感興趣的，關注已久的話題。 有很多人都忘記了，或在簡單的說沒有意識...

    hyuan 評論0 收藏0

  • 前端面試題-CSS選擇器性能優化

    摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

    Scott 評論0 收藏0

  • 前端面試題-CSS選擇器性能優化

    摘要：不要在編寫規則時用標簽名或類名不要在編寫規則時用標簽名把多層標簽選擇規則用規則替換，減少查找避免使用子選擇器后代選擇器在中是最昂貴的選擇器。如果你關心頁面性能的話，他們真不該被使用擴展閱讀前端面試題選擇器前端面試題優先級 一、CSS選擇符 CSS選擇符由一些初始化參數組成，這些參數指明了要應用這個CSS規則的頁面元素。 作為一個網站的前端開發工程師，應該避免編寫一些常見的開銷很大的CS...

    XGBCCC 評論0 收藏0

發表評論

0條評論

張金寶

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<