偽類選擇器:CSS中已經(jīng)定義好的選擇器,不能隨便取名
常用的偽類選擇器是使用在a元素上的幾種,`如a:link|a:visited|a:hover|a:active`
提示:在 CSS 定義中,a:hover 必須被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定義中,a:active 必須被置于 a:hover 之后,才是有效的。
偽元素選擇器:并不是針對(duì)真正的元素使用的選擇器,而是針對(duì)CSS中已經(jīng)定義好的偽元素使用的選擇器。
CSS中有如下四種偽元素選擇器:
· first-line:為某個(gè)元素的第一行文字使用樣式;
· first-letter:為某個(gè)元素中的文字的首字母或第一個(gè)字使用樣式;
· before:在某個(gè)元素之前插入一些內(nèi)容;
· after: 在某個(gè)元素之后插入一些內(nèi)容;
使用方法:選擇器:偽元素{樣式}
結(jié)構(gòu)性偽類選擇器
1. 四個(gè)最基本的:root、not、empty、target
2. first-child、last-child、nth-child、nth-last-child、
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)
3. nth-of-type、nth-last-of-type
4. 循環(huán)使用樣式
5. only-child
:root()選擇器,從字面上我們就可以很清楚的理解是根選擇器,他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中,根元素始終是<html>。“:root”選擇器等同于<html>元素
:not()選擇器稱為否定選擇器,和jQuery中的:not選擇器一模一樣,可以選擇除某個(gè)元素之外的所有元素。
:empty()選擇器表示的就是空。用來(lái)選擇沒(méi)有任何內(nèi)容的元素,這里沒(méi)有內(nèi)容指的是一點(diǎn)內(nèi)容都沒(méi)有,哪怕是一個(gè)空格。
:target()選擇器來(lái)對(duì)頁(yè)面某個(gè)target元素(該元素的id被當(dāng)做頁(yè)面中的超鏈接來(lái)使用)指定樣式,該樣式只在用戶點(diǎn)擊了頁(yè)面中的超鏈接,并且跳轉(zhuǎn)到target元素后起作用
“:first-child()”選擇器表示的是選擇父元素的第一個(gè)子元素的元素E。簡(jiǎn)單點(diǎn)理解就是選擇元素中的第一個(gè)子元素,記住是子元素,而不是后代元素。
:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素;
:nth-last-child()從某父元素的最后一個(gè)子元素開(kāi)始計(jì)算,來(lái)選擇特定的元素。
看下面一個(gè)例子:
新聞熱點(diǎn)
疑難解答
圖片精選