CSS選擇器及其優先級

xorpay 發布于2019-08-30 14:15 / 3440人閱讀

摘要：基本選擇器標簽選擇器標簽選擇器又叫元素選擇器，換句話說，文檔的元素就是最基本的選擇器，使用元素名稱直接選擇元素即可如。

基本選擇器 標簽選擇器

標簽選擇器又叫元素選擇器，換句話說，文檔的元素就是最基本的選擇器，使用元素名稱直接選擇元素即可（如body,p,ul,ol,dl）。

類選擇器

類選擇以點"."開頭，后面緊跟一個類名。類名不允許有空格，與元素中class屬性的值保持一致。一個元素可以有多個class的值，每個值通過空格分割開。類名相同的元素屬于一類元素。

 
    
       Creat an HTML document
       Creat a CSS style sheet
       Link them all together

ID選擇器

ID選擇器以"#"開頭，后面緊跟一個ID名，在一個文檔中，ID值不能重復，因此在選擇文檔中唯一元素的時候該選擇器比較有用。

— "Good morning."

— "Go away!"

普遍選擇器

使用"*"來表示普遍選擇器，表示選擇所有元素，通常用在組合選擇器中。

多選擇器

多個選擇器并列使用，使用“,”分割
例如："div,.one,#tt" 表示選擇div元素，class為one的元素以及id為tt的元素。

層次選擇器 后代選擇器

使用 “ ” 隔開兩個選擇器。例如 "ul li"表示選擇ul的后代元素li，li可以為ul的直接子元素，也可以為ul的孫子元素。

子代選擇器

使用 “>” 隔開兩個選擇器。例如 "ul>li"表示選擇ul的直接子代元素li,ul的孫子元素li無法被選擇到

相鄰同胞元素

使用 “+” 隔開兩個選擇器。例如 ".one+*"表示選擇class為"one"元素的下一個兄弟元素。

一般同胞選擇器

使用 “~” 隔開兩個選擇器。例如 ".one~*"表示選擇class為"one"元素的所有兄弟元素。

屬性選擇器（配合基本選擇器進行篩選）

[attr] 選擇具有attr屬性的元素、無論該屬性的值為什么

[attr=val] 選擇具有attr屬性的、并且attr的值為val元素

[attr~=val] 選擇具有attr屬性的、并且attr的值之一為val的元素

[attr^=val] 選擇具有attr屬性的、并且attr的值以val開頭的元素

[attr$=val] 選擇具有attr屬性的、并且attr的值以val結尾的元素

[attr*=val] 選擇具有attr屬性的、并且attr的值包含val的元素

偽類選擇器

偽類以":"開頭，用在選擇器后，用于指明元素在某種特殊的狀態下才能被選中（配合基本選擇器進行篩選）

子元素:

:only-child
:first-child
:last-child
:nth-child(n) 、: nth-last-child(n)
:first-of-type、:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)
......
n可以為元素的序號，也可以為特殊的字符，比如“odd”，“even

元素狀態相關

:hover
:active
:focus
......

偽元素選擇器

偽元素以"::"開頭，用在選擇器后，用于選擇指定的元素。
::after
::before
::first-letter
::first-line
::selection

...... 選擇器優先級

在所有的選擇器中某個選擇器定義的規則是否能夠勝出（即優先級）取決于三個元素：Importance，特性值，代碼順序。

!important聲明(Importance)

在css規則的值末尾添加"!important"能夠保證該規則優先其他規則。但是一般建議不使用"!important",因為它會改變級聯的工作方式，使得調試變得困難。

特性值

通過4個特性值來量化一個選擇器

聲明在元素的style屬性中。特性值記為1000

包含在一個選擇器中的所有ID選擇器。特性值記為100

包含在一個選擇器中的所有類選擇器，屬性選擇器，偽類選擇器。屬性值記為10

包含在一個選擇器中的所有元素選擇器，偽元素選擇器.屬性值記為1

代碼順序

如果多個競爭選擇器具有相同的重要性和特性值，代碼順序就發揮作用了，后來規則優先前面規則。

GPU云服務器云服務器 css選擇器基礎選擇器css 優先選擇 css選擇

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

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

CSS優先級的及其衡量標準CSS權重

摘要：優先級是由權重來作為衡量標準的，權重的計算有一套計算公式，有如下規范使用一個位數的字串來表示級別，從左到右，左邊的做大，往右依次遞減，且數位之間沒有進制，級別之間不可逾越。定義了一個命令，該命令被賦予最大的優先級。一、背景 CSS有三大特性：層疊性、繼承性、優先級。而我們在給CSS定義樣式的時候，經常出現兩個及以上的規則應用在同一元素上，單該元素最終在瀏覽器呈現的效果是應用的哪個規則呢？這...

ky0ncheng 2019-04-23 13:28 評論0 收藏0
前端面試筆記 - css

摘要：是頁面渲染的一部分。一個就是一個整體，所有子元素都會在里面渲染，而不會影響外面的元素。常見為，根元素，，元素，或者設置了的元素列舉不同的清除浮動的技巧，并指出它們各自適用的使用場景。是一個把眾多小圖片打包成一個大圖以減少請求。 CSS 中類 (classes) 和 ID 的區別。 id唯一，class可以多個請問 resetting 和 normalizing CSS 之間的區別？你...

loonggg 2019-08-23 14:50 評論0 收藏0
你對CSS權重真的足夠了解嗎？

摘要：如果兩個權重不同的選擇器作用在同一元素上，權重值高的規則生效選擇器可能會包含一個或者多個與權重相關的計算點，若經過權重值計算得到的權重值越大，則認為這個選擇器的權重高。前言 css權重很多人都聽過，也了解一些，但是很多人對具體的規則或者說再深如一些關于css權重的問題，可能會不那么清楚。日常開發中，或多或少都會遇到css規則不生效的問題，為了讓我們能夠減少調試css規則的時間，深刻理...

xioqua 2019-08-29 15:27 評論0 收藏0
前端面試之Css篇

摘要：替換元素是指用作為其他內容占位符的一個元素。瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。折疊的結果兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。兩個外邊距一正一負時，折疊結果是兩者的相加的和。 1 . CSS 屬性是否區分大小寫？答：不區分。 HTML，CSS都對大小寫不敏感，但為了更好的可讀性和團隊協作一般都小寫，而在XHTML 中元素名稱和...

leejan97 2019-08-29 12:42 評論0 收藏0
JavaScript 是如何工作: Shadow DOM 的內部結構+如何編寫獨立的組件！

摘要：向影子樹添加的任何內容都將成為宿主元素的本地元素，包括，這就是影子實現樣式作用域的方式。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 17 篇。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！如果你錯過了前面的章節，可以在這里找到它們： JavaScript 是如何工作的：引擎，運行時和調用堆棧的概述！ JavaScript 是如何工作...

godlong_X 2019-08-26 13:29 評論0 收藏0