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

資訊專欄INFORMATION COLUMN

css選擇器總結(jié)

Bowman_han / 493人閱讀

摘要：今天在做項目的時候，發(fā)現(xiàn)選擇器有些遺忘。文本也屬于節(jié)點選擇匹配的所有元素，且匹配元素被相關(guān)指向否定偽類選擇器。相鄰兄弟選擇器。匹配的元素，該元素位于后面相鄰位置通用兄弟選擇器。

今天在做項目的時候，發(fā)現(xiàn)選擇器有些遺忘。特寫此文章來加深記憶，也方便自己日后回顧。

通用選擇器 * 
//有時候為了瀏覽器內(nèi)置樣式，可能會這樣寫。
//但一般不推薦！?。?*{ margin:0;padding:0; }
標(biāo)簽選擇器 E ID選擇器 #myid 類選擇器 .myclass 
類選擇器和ID選擇器算是最常見兩種選擇器。
這里要講一下關(guān)于選擇器優(yōu)先級。
優(yōu)先級從高到低分別為：
內(nèi)聯(lián)樣式、ID、class/屬性選擇器/偽類選擇器[如:hover,:focus]等、元素選擇器/偽元素選擇器[如:before,:after]
如果兩個優(yōu)先級相同，則按照聲明順序，寫在【樣式表】后面的起作用。
【注意！是在樣式表中的位置！而不是在使用的位置！】



    
 123 



最后p的顏色顯示為red?。。∈菍懺跇邮奖砗竺娴?classB起作用！
屬性選擇器

E[disable] E中定義了disable屬性的元素。E可省略，則表示選擇定義了disable屬性的任意類型的元素

E[att="val"] 匹配所有att屬性等于val的E元素。E可省略，同上。

E[att~=key] 匹配att屬性有key的元素,att屬性是一個以空格符分隔的列表。



a[title~="bar1"]匹配第一個a元素

E[att|=es] 匹配E的元素，且att屬性值是以es開頭，att屬性是用‘-’分隔的列表。



[lang|en] 匹配第一個body元素

E[att*="bar"] 匹配E的元素，且att屬性值包含bar的子字符串。

E[att^="http://"] 匹配E的元素，且att屬性以http://開頭

E[att$=".png"] 匹配E的元素，且att屬性以.png結(jié)尾

偽類選擇器

E:link 被定義了超鏈接并未被訪問

E:visited 被定義了超鏈接并已經(jīng)訪問

E:active 匹配元素被激活

E:hover 匹配元素正在被鼠標(biāo)經(jīng)過

【注意順序：LVHA :link->:visited->:active:->:hover】
舉個栗子。

a:link {color: blue;}
a:active {color: red;}
a:hover {color: magenta;}
a:visited {color: purple;}

由于優(yōu)先級相同，按照先后順序來顯示。
一個未被訪問過的鏈接可以同時是hover和active的狀態(tài)，但是由于visited寫在最后，所以會覆蓋了:active和:hover的樣式。那么這個鏈接都是紫色的,無法呈現(xiàn):active和:hover的狀態(tài)。

E:focus 匹配元素獲取了焦點

E:first-child 匹配E的元素，且該元素是父元素的第一個子元素

E:last-child 父元素中最后一個位置，且匹配E的子元素

E:nth-child(n) 選擇所有在其父元素中第n個位置的匹配E的子元素

E:nth-last-child(n) 選擇所有在其父元素中倒數(shù)第n個位置的匹配E的子元素

E:nth-of-type(n) 在所有滿足E的元素內(nèi)的第n個元素

E:first-of-type 相當(dāng)于E:nth-of-type(1)

E:last-of-type 相當(dāng)于E:nth-last-of-type(1)

這里nth-child/nth-last-child和nth-of-type容易混淆。


    

    
123

    
456




p:nth-of-type(2){color:red;}
p:nth-child(2){color:blue;}

效果：
123為藍(lán)色。p:nth-child(2)匹配其父元素中第二個位置的p元素。若div元素第二個位置元素不是p元素，則不起作用。
456為紅色。p:nth-of-type(2)匹配div中所有p元素中的第二個。

E:empty 匹配E的元素，且不包含子節(jié)點?！疚谋疽矊儆诠?jié)點】

E:target 選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向

E:not(s) 否定偽類選擇器。匹配E且不滿足s選擇符的元素。

E:root 匹配文檔根元素

E::selection 匹配當(dāng)前選中的元素

E:checked 匹配E的所有被選中UI元素radio/checkbox

E:enabled 匹配E的所有可用UI元素

E:disabled 匹配E的所有不可用UI元素

在網(wǎng)頁中，UI元素一般是指包含在form元素內(nèi)的表單元素


    
    
    
    



input:checked 匹配單選按鈕，不匹配復(fù)選框
input:enabled 匹配文本框，復(fù)選框，單選按鈕，不匹配button
input:disable 匹配button

關(guān)系選擇器

A E 后代選擇器。匹配E，且是被包含在A內(nèi)的元素。只要是A的后代即可。

A > E 子包含選擇器。匹配E的元素，且是A元素的子元素！只能是子元素，不能是孫元素等。。

B + E 相鄰兄弟選擇器。匹配E的元素，該元素位于B后面相鄰位置！

A ~ E 通用兄弟選擇器。匹配E的元素，該元素位于E元素的后面，且在同一級結(jié)構(gòu)。即兄弟位置。

偽元素選擇器

E:first-line E元素內(nèi)第一行文本

E:first-letter E元素內(nèi)第一個字符

E:before 在E元素之前插入生成內(nèi)容

E:after 在E元素之后插入生成的內(nèi)容

之前利用選擇器和css3動畫寫了一個篩選菜單的效果。
github地址如下：https://github.com/Lsxj/css3/tree/master/css-filter
效果如下：

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

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

相關(guān)文章

  • css選擇器總結(jié)

    摘要：偽類選擇器之動態(tài)偽類序號選擇器名稱說明版本動態(tài)偽類選擇器未被訪問時動態(tài)偽類選擇器已被訪問時動態(tài)偽類選擇器鼠標(biāo)以上時動態(tài)偽類選擇器訪問中跳轉(zhuǎn)頁面時動態(tài)偽類選擇器獲得焦點時是有順序的，其他順序可能無效，這是個坑。 1. 基本選擇器 序號 選擇器 名稱 說明 css版本 1 * 通用選擇器 選擇所有元素，包括html和body 2 2 div,span 標(biāo)簽選擇器 根據(jù)標(biāo)簽選擇...

    DirtyMind 評論0 收藏0

  • CSS選擇器總結(jié)（分類、優(yōu)先級）

    摘要：樣式選擇器權(quán)重優(yōu)先級如下的權(quán)重為選擇器的權(quán)重為類選擇器的權(quán)重為偽類選擇器的權(quán)重為屬性選擇器的權(quán)重為標(biāo)簽選擇器的權(quán)重為偽元素選擇器的權(quán)重為通配符的權(quán)重為綜合上述權(quán)重優(yōu)先級來看，正確的優(yōu)先級排序應(yīng)該是內(nèi)聯(lián)樣式類偽類屬性選擇標(biāo)簽偽元素繼承通配符 CSS選擇器是編寫CSS代碼時的一個核心概念，選擇器定義了相應(yīng)的樣式將會影響到文檔中的哪些部分，以下是自己在學(xué)習(xí)及工作過程中對CSS選擇器的一些總結(jié)...

    hedge_hog 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    王巖威 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    liukai90 評論0 收藏0

  • css規(guī)范總結(jié)

    摘要：通用選擇器，子選擇器和相鄰?fù)x擇器并不在這四個等級中，所以他們的權(quán)值都為，優(yōu)先級最高，萬不得已的情況下才用。規(guī)范命名風(fēng)格規(guī)范文件命名統(tǒng)一為小寫的英文字母盡量少用拼音，如。當(dāng)名字需要組合時，可以采用文件名的規(guī)范。 css樣式的權(quán)值(權(quán)重) 權(quán)值等級的定義 第一等：代表內(nèi)聯(lián)樣式，如: style=，權(quán)值為1000。第二等：代表ID選擇器，如：#content，權(quán)值為100。第三等：代表類...

    CollinPeng 評論0 收藏0

發(fā)表評論

0條評論

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