資訊專欄INFORMATION COLUMN
摘要：今天介紹一下，選擇器和選擇器的優(yōu)先級。選擇父元素為元素的所有元素。注釋不支持選擇器。二選擇器的優(yōu)先級在中并沒有給各個選擇器名字，在權(quán)威指南一書中，給出了選擇器的名字，如通配選擇器，選擇器，選擇器，等等。
今天介紹一下，css選擇器和選擇器的優(yōu)先級。
一、選擇器更加專業(yè)性的介紹，來看一下w3school中的描述，網(wǎng)址為：http://www.w3school.com.cn/cs...
下面多帶帶說一下容易混淆的內(nèi)容：
element>element 和 element element的區(qū)別：
element element | div p | 選擇元素內(nèi)部的所有元素。 element>element | div>p | 選擇父元素為
元素的所有元素。
加>的表示單純的父子級關(guān)系，而不加>的為祖先關(guān)系，祖先關(guān)系包含父子級關(guān)系。這里很好理解，就不再展開說明了。
a標(biāo)簽的四個偽類：link，visited，hover，active
link： 鏈接未被訪問
visited： 鏈接已經(jīng)被訪問過
hover： 鼠標(biāo)懸停在a標(biāo)簽
active： a標(biāo)簽被鼠標(biāo)按著時(shí)這四個偽類在書寫時(shí)，要按照一定的順序：lvha，這是因?yàn)閏ss中規(guī)定，同等優(yōu)先權(quán)的樣式，寫在后面的會覆蓋前面的。可以利用love和hate來記憶。
注意區(qū)分nth-child(n)和nth-of-type(n)
p: nth-child(n) //p標(biāo)簽且為第n個子元素
p: nth-of-type(n) //第n個p標(biāo)簽這個還是非常有必要詳細(xì)展開的。
這是標(biāo)題
第一個段落。
第二個段落。
第三個段落。
第四個段落。
注釋：Internet Explorer 不支持 :nth-child() 選擇器。
在這段代碼中p:nth-child(2)表示p元素且為第二個子元素，p元素的父級為body，所以“第一個段落”的p標(biāo)簽為第二個子元素。將第二個子元素改為div，那么來看如下的代碼：
發(fā)現(xiàn)p:nth-child(2)所尋找的元素不存在。因?yàn)椴粷M足第二個條件。
再來說說nth-of-type(n)，這個比較理解，因?yàn)樗呐袛鄺l件只有一個，第n個元素，我們將上面這段代碼變換如下：
這是標(biāo)題
第一個段落。第二個段落。
第三個段落。
第四個段落。
注釋：Internet Explorer 不支持 :nth-child() 選擇器。
那再來一段比較兩者的代碼：
這是標(biāo)題
第一個段落。
第二個段落。
第三個段落。
第四個段落。
注釋：Internet Explorer 不支持 :nth-child() 選擇器。
這樣就能很清楚的看出兩者的區(qū)別了。
二、選擇器的優(yōu)先級在w3school中并沒有給各個選擇器名字，在css權(quán)威指南一書中，給出了選擇器的名字，如通配選擇器*{}，id選擇器#id{}，class選擇器.class{}，等等。
我們可以通過多個選擇器給一個目標(biāo)元素添加樣式，如可以用通配選擇器給所有元素一個border值，可以用div{}給所有div一個border值，還可以通過它的class名id名或者它的父級來設(shè)置border，那問題來了，這么多border，它要取哪個呢？
選擇器的優(yōu)先級，目前在網(wǎng)上來看有兩種方法，但遵循的規(guī)則是一樣的，即采用加權(quán)的計(jì)算方法，!important > id選擇器 > class選擇器 > 其他選擇器。
!important 并不推薦使用，但存在就有存在的理由，但凡出現(xiàn)!important，均以!important為準(zhǔn)，那要是出現(xiàn)多個呢？以最后一個為準(zhǔn)。
可以給上述的選擇器一個權(quán)值，如下（當(dāng)然也可以自己設(shè)置一個權(quán)值，這個權(quán)值不易過小）
``` !important -- 1000 id選擇器 -- 100 class選擇器 -- 10 其他選擇器 -- 1 ```另外一種方法是，
``` !important ： id選擇器 ： class選擇器 ： 其他選擇器 eg. 1 : 0 : 0 : 0 0 : 1 : 0 : 1 0 : 0 : 1 : 0 0 : 0 : 0 : 1 ```這里的比較大小怎么計(jì)算就很好看出了，從左向右比較，先比較左邊第一位，相同則比較下一位，直到出現(xiàn)不同，較大的優(yōu)先級高。上面中的例子eg，是優(yōu)先級由大到小排列。
如果覺得還不錯，就點(diǎn)一下下面的推薦吧，有什么問題，歡迎在下面的評論區(qū)留言~~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115305.html
相關(guān)文章
HTTP 緩存的相關(guān)協(xié)議
摘要：上一篇文章梳理緩存的關(guān)鍵路徑。這條路徑的完成，依賴于協(xié)議。首次驗(yàn)證相關(guān)協(xié)議服務(wù)器在響應(yīng)報(bào)文中設(shè)置或，緩存器對資源進(jìn)行緩存。再次請求同一資源時(shí)，緩存器通過檢查和，決定緩存是否過期的過程稱為首次驗(yàn)證。因此，有雙向控制緩存的能力。 上一篇文章 梳理 HTTP 緩存的關(guān)鍵路徑。瀏覽器發(fā)起 HTTP 請求，請求報(bào)文發(fā)往瀏覽器內(nèi)置的緩存器，緩存器經(jīng)過首次驗(yàn)證，再決定是否向服務(wù)器發(fā)起緩存的再次驗(yàn)證。...
前端知識點(diǎn)總結(jié)——C3
摘要：前端知識點(diǎn)總結(jié)復(fù)雜選擇器兄弟選擇器兄弟元素具備相同父元素的平級元素之間稱為兄弟元素。 前端知識點(diǎn)總結(jié)——C3 1.復(fù)雜選擇器 1.兄弟選擇器 兄弟元素：具備相同父元素的平級元素之間稱為兄弟元素。 1.相鄰兄弟選擇器 作用：獲取緊緊挨在某元素后的兄弟元素 語法：選擇器1+選擇器2{} 注意：兄弟選擇器，只能向后找，不能向前找 2.通用兄弟選擇器 作用：獲取...
細(xì)說 jQuery 元素篇（二） - 選擇符
摘要：為了更方便對元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規(guī)范中的所有選擇符。介紹個比較有用的自定義選擇符選擇符。 為了更方便對 DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規(guī)范中的所有選擇符。舉例如下： ...
面試記錄2
摘要：面試記錄的原理，和進(jìn)程相關(guān)進(jìn)程和線程的關(guān)系進(jìn)程和線程的區(qū)別選擇器的優(yōu)先級不同級別行內(nèi)樣式選擇器類選擇器標(biāo)簽通配符繼承瀏覽器默認(rèn)屬性相同級別后面覆蓋前面的閉包相關(guān)閉包的作用在函數(shù)外部讀取函數(shù)內(nèi)部局部變量在函數(shù)外部讀取函數(shù)內(nèi)部局部變量，變量被封 面試記錄2 1. Ajax的原理，和進(jìn)程相關(guān) 2. 進(jìn)程和線程的關(guān)系 進(jìn)程和線程的區(qū)別 3. css選擇器的優(yōu)先級 不同級別 !important...
面試記錄2
摘要：面試記錄的原理，和進(jìn)程相關(guān)進(jìn)程和線程的關(guān)系進(jìn)程和線程的區(qū)別選擇器的優(yōu)先級不同級別行內(nèi)樣式選擇器類選擇器標(biāo)簽通配符繼承瀏覽器默認(rèn)屬性相同級別后面覆蓋前面的閉包相關(guān)閉包的作用在函數(shù)外部讀取函數(shù)內(nèi)部局部變量在函數(shù)外部讀取函數(shù)內(nèi)部局部變量，變量被封 面試記錄2 1. Ajax的原理，和進(jìn)程相關(guān) 2. 進(jìn)程和線程的關(guān)系 進(jìn)程和線程的區(qū)別 3. css選擇器的優(yōu)先級 不同級別 !important...
發(fā)表評論
0條評論
閱讀 3208·2023-04-26 01:30
閱讀 671·2021-11-08 13:15
閱讀 1791·2021-09-24 10:35
閱讀 1005·2021-09-22 15:41
閱讀 1932·2019-08-30 15:44
閱讀 597·2019-08-30 13:22
閱讀 1011·2019-08-30 13:06
閱讀 1203·2019-08-29 13:22
