成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

細(xì)說C3選擇器

OnlyMyRailgun / 1031人閱讀

摘要：今天介紹一下，選擇器和選擇器的優(yōu)先級(jí)。選擇父元素為元素的所有元素。注釋不支持選擇器。二選擇器的優(yōu)先級(jí)在中并沒有給各個(gè)選擇器名字，在權(quán)威指南一書中，給出了選擇器的名字，如通配選擇器，選擇器，選擇器，等等。

今天介紹一下，css選擇器和選擇器的優(yōu)先級(jí)。

一、選擇器

更加專業(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 | 選擇父元素為 
 元素的所有 
 元素。

加>的表示單純的父子級(jí)關(guān)系，而不加>的為祖先關(guān)系，祖先關(guān)系包含父子級(jí)關(guān)系。這里很好理解，就不再展開說明了。

a標(biāo)簽的四個(gè)偽類：link，visited，hover，active

link： 鏈接未被訪問
visited： 鏈接已經(jīng)被訪問過
hover： 鼠標(biāo)懸停在a標(biāo)簽
active： a標(biāo)簽被鼠標(biāo)按著時(shí)

這四個(gè)偽類在書寫時(shí)，要按照一定的順序：lvha，這是因?yàn)閏ss中規(guī)定，同等優(yōu)先權(quán)的樣式，寫在后面的會(huì)覆蓋前面的。可以利用love和hate來記憶。

注意區(qū)分nth-child(n)和nth-of-type(n)

p: nth-child(n) //p標(biāo)簽且為第n個(gè)子元素
p: nth-of-type(n) //第n個(gè)p標(biāo)簽

這個(gè)還是非常有必要詳細(xì)展開的。









這是標(biāo)題


第一個(gè)段落。


第二個(gè)段落。


第三個(gè)段落。


第四個(gè)段落。



注釋：Internet Explorer 不支持 :nth-child() 選擇器。

在這段代碼中p:nth-child(2)表示p元素且為第二個(gè)子元素，p元素的父級(jí)為body，所以“第一個(gè)段落”的p標(biāo)簽為第二個(gè)子元素。將第二個(gè)子元素改為div，那么來看如下的代碼：

發(fā)現(xiàn)p:nth-child(2)所尋找的元素不存在。因?yàn)椴粷M足第二個(gè)條件。

再來說說nth-of-type(n)，這個(gè)比較理解，因?yàn)樗呐袛鄺l件只有一個(gè)，第n個(gè)元素，我們將上面這段代碼變換如下：









這是標(biāo)題


第一個(gè)段落。


第二個(gè)段落。


第三個(gè)段落。


第四個(gè)段落。



注釋：Internet Explorer 不支持 :nth-child() 選擇器。

那再來一段比較兩者的代碼：









這是標(biāo)題


第一個(gè)段落。


第二個(gè)段落。


第三個(gè)段落。


第四個(gè)段落。



注釋：Internet Explorer 不支持 :nth-child() 選擇器。

這樣就能很清楚的看出兩者的區(qū)別了。

二、選擇器的優(yōu)先級(jí)

在w3school中并沒有給各個(gè)選擇器名字，在css權(quán)威指南一書中，給出了選擇器的名字，如通配選擇器*{}，id選擇器#id{}，class選擇器.class{}，等等。

我們可以通過多個(gè)選擇器給一個(gè)目標(biāo)元素添加樣式，如可以用通配選擇器給所有元素一個(gè)border值，可以用div{}給所有div一個(gè)border值，還可以通過它的class名id名或者它的父級(jí)來設(shè)置border，那問題來了，這么多border，它要取哪個(gè)呢？

選擇器的優(yōu)先級(jí)，目前在網(wǎng)上來看有兩種方法，但遵循的規(guī)則是一樣的，即采用加權(quán)的計(jì)算方法，!important > id選擇器 > class選擇器 > 其他選擇器。

!important 并不推薦使用，但存在就有存在的理由，但凡出現(xiàn)!important，均以!important為準(zhǔn)，那要是出現(xiàn)多個(gè)呢？以最后一個(gè)為準(zhǔn)。

可以給上述的選擇器一個(gè)權(quán)值，如下（當(dāng)然也可以自己設(shè)置一個(gè)權(quán)值，這個(gè)權(quán)值不易過?。?/p> 

```
!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)先級(jí)高。上面中的例子eg，是優(yōu)先級(jí)由大到小排列。

如果覺得還不錯(cuò)，就點(diǎn)一下下面的推薦吧，有什么問題，歡迎在下面的評(píng)論區(qū)留言~~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115305.html

相關(guān)文章

  • HTTP 緩存的相關(guān)協(xié)議

    摘要：上一篇文章梳理緩存的關(guān)鍵路徑。這條路徑的完成，依賴于協(xié)議。首次驗(yàn)證相關(guān)協(xié)議服務(wù)器在響應(yīng)報(bào)文中設(shè)置或，緩存器對(duì)資源進(jìn)行緩存。再次請(qǐng)求同一資源時(shí)，緩存器通過檢查和，決定緩存是否過期的過程稱為首次驗(yàn)證。因此，有雙向控制緩存的能力。 上一篇文章 梳理 HTTP 緩存的關(guān)鍵路徑。瀏覽器發(fā)起 HTTP 請(qǐng)求，請(qǐng)求報(bào)文發(fā)往瀏覽器內(nèi)置的緩存器，緩存器經(jīng)過首次驗(yàn)證，再?zèng)Q定是否向服務(wù)器發(fā)起緩存的再次驗(yàn)證。...

    HelKyle 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)總結(jié)——C3

    摘要：前端知識(shí)點(diǎn)總結(jié)復(fù)雜選擇器兄弟選擇器兄弟元素具備相同父元素的平級(jí)元素之間稱為兄弟元素。 前端知識(shí)點(diǎn)總結(jié)——C3 1.復(fù)雜選擇器 1.兄弟選擇器 兄弟元素：具備相同父元素的平級(jí)元素之間稱為兄弟元素。 1.相鄰兄弟選擇器 作用：獲取緊緊挨在某元素后的兄弟元素 語法：選擇器1+選擇器2{} 注意：兄弟選擇器，只能向后找，不能向前找 2.通用兄弟選擇器 作用：獲取...

    meislzhua 評(píng)論0 收藏0

  • 細(xì)說 jQuery 元素篇（二） - 選擇符

    摘要：為了更方便對(duì)元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規(guī)范中的所有選擇符。介紹個(gè)比較有用的自定義選擇符選擇符。 為了更方便對(duì) DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規(guī)范中的所有選擇符。舉例如下： ...

    104828720 評(píng)論0 收藏0

  • 面試記錄2

    摘要：面試記錄的原理，和進(jìn)程相關(guān)進(jìn)程和線程的關(guān)系進(jìn)程和線程的區(qū)別選擇器的優(yōu)先級(jí)不同級(jí)別行內(nèi)樣式選擇器類選擇器標(biāo)簽通配符繼承瀏覽器默認(rèn)屬性相同級(jí)別后面覆蓋前面的閉包相關(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)先級(jí) 不同級(jí)別 !important...

    qieangel2013 評(píng)論0 收藏0

  • 面試記錄2

    摘要：面試記錄的原理，和進(jìn)程相關(guān)進(jìn)程和線程的關(guān)系進(jìn)程和線程的區(qū)別選擇器的優(yōu)先級(jí)不同級(jí)別行內(nèi)樣式選擇器類選擇器標(biāo)簽通配符繼承瀏覽器默認(rèn)屬性相同級(jí)別后面覆蓋前面的閉包相關(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)先級(jí) 不同級(jí)別 !important...

    qpal 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<