CSS學(xué)習(xí)-選擇器

2018-9-7    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

選擇器

學(xué)習(xí)目的 熟練使用 css 選擇器


css1 中的選擇器


E #myid         id選擇器

E .warning      類選擇器

E F             包含選擇器

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

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

E:actice        匹配被激活的元素

E：hover     鼠標(biāo)經(jīng)過的元素

E：focus     獲取焦點(diǎn)

E::first-line   元素第一行

E::first-letter 元素第一個(gè)字符


css2


*               通配選擇文檔中所有元素

E[foo]          包含foo屬性的元素

E[foo="bar"]    包含屬性foo值為bar的元素


CSS3 中的選擇器可替代 了解即可

E[foo~="bar"]  含有屬性foo值包括bar的元素例如 <a foo="bar bar1 bar2">link</a>

E[foo|="en"]    屬性值是一個(gè)“-”分割的 比如 en-us


E:first-child   父元素的第一個(gè)子元素

E：lang(fr)      匹配屬性，元素顯示內(nèi)容為語言為 fr

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

E::after        在元素后面插入內(nèi)容

E>F             子包含

E+E             相鄰兄弟選擇器 后面的兄弟


css3


E[foo^="bar"]   屬性foo的值開頭是bar

E[foo$="bar"]  屬性foo的值得結(jié)尾是bar

E[foo*="bar"]   屬性foo的值包含bar <a foo="abc_bar_as">link</a>


結(jié)構(gòu)類選擇器


E:root          屬性文檔所在的根元素

E:nth-child(n)  E元素第n個(gè)位置的子元素 n可以是 (1,2,3) 關(guān)鍵字(odd,even) 公式(2n,2n+3) 起始值為1

E:nth-last-child(n) 與上面的使用方法一樣 倒數(shù)的第N個(gè)位置的子元素

E:nth-of-type(n)    匹配父元素中與E相同的元素中的第n個(gè)元素

E:nth-last-of-type(n)   匹配父元素中與E相同的倒數(shù)第n個(gè)元素

E:last-child    選擇位于其父元素的最后一個(gè)位置，且匹配E的子元素

E:first-of-type 選擇在其父元素中匹配E的第一個(gè)同類型的子元素

E:last-of-type  選擇在其父元素中匹配E的最后一個(gè)同類型的子元素

E:only-child    選擇其父元素只包含一個(gè)子元素，且該子元素匹配E

E:only-of-type  選擇其父元素只包含一個(gè)同類型的子元素，且該子元素匹配E

E:empty         選擇匹配E的元素，且該元素不包含子節(jié)點(diǎn)，文本也是節(jié)點(diǎn)


E~F 通用兄弟選擇器

E:not(s)    否定偽類選擇器


藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。



日歷

鏈接

個(gè)人資料

存檔