CSS選擇器 - 4 偽類選擇器和偽元素選擇器

偽類(偽類選擇器)

偽類:同一個標簽,根據(jù)其不同的種狀態(tài)躬拢,有不同的樣式躲履。這就叫做“偽類”。偽類用冒號來表示聊闯。

比如div是屬于box類工猜,這一點很明確,就是屬于box類菱蔬。但是a屬于什么類篷帅?不明確。因為需要看用戶點擊前是什么狀態(tài)拴泌,點擊后是什么狀態(tài)魏身。所以,就叫做“偽類”蚪腐。

靜態(tài)偽類和動態(tài)偽類

偽類選擇器分為兩種箭昵。
(1)靜態(tài)偽類:只能用于超鏈接的樣式。如下:

  • :link 超鏈接點擊之前
  • :visited 鏈接被訪問過之后
    PS:以上兩種樣式回季,只能用于超鏈接宙枷。

(2)動態(tài)偽類:針對所有標簽都適用的樣式掉房。如下:

  • :hover “懸停”:鼠標放到標簽上的時候
  • :active “激活”: 鼠標點擊標簽慰丛,但是不松手時卓囚。
  • :focus 是某個標簽獲得焦點時的樣式(比如某個輸入框獲得焦點)
    PS:以上三種樣式,只能用于超鏈接诅病。

超鏈接a標簽

超鏈接的四種狀態(tài)

a標簽有4種偽類(即對應四種狀態(tài))哪亿,要求背誦。如下:

  • :link “鏈接”:超鏈接點擊之前
  • :visited “訪問過的”:鏈接被訪問過之后
  • :hover “懸拖桶剩”:鼠標放到標簽上的時候
  • :active “激活”: 鼠標點擊標簽蝇棉,但是不松手時。

記住芥永,在css中篡殷,這四種狀態(tài)必須按照固定的順序?qū)懀?/strong>
a:link 、a:visited 埋涧、a:hover 板辽、a:active

E:first-child 匹配作為父元素第一個子元素E

選擇屬于其父元素的首個子元素的每個 <p> 元素,并為其設置樣式:

p:first-child
{ 
background-color:yellow;
}

E:last-child

匹配作為父元素最后一個子元素E

E:only-child

匹配作為父元素的唯一一個子元素E

E:nth-child(n)

匹配作為父元素的第n個子元素E棘催。括號中是一個具體的數(shù)字(還可以這樣用:nth-child(2n+1)表示奇數(shù)項劲弦, nth-child(2n+2)表示偶數(shù)項)

偽元素選擇器

1、::before 和 ::after

  1. 必須帶一個屬性content

2.在內(nèi)部內(nèi)容的前面或者后面插入內(nèi)容

<div>必須帶一個屬性content</div>
 div::before {
        content: "我是插入的內(nèi)容";
        background: #572eb8;
}

1.1 當插入的內(nèi)容定義寬高和其他屬性時醇坝,其實就是一個盒子(必須通過display轉(zhuǎn)換邑跪,因為默認是一個行內(nèi)元素)。

<body>
    <div>盒子1</div>
</body>
div{
        width: 500px;
        height: 500px;
        border: 1px solid #000;
    }
    div::before{
        content: "插入的盒子";
        display: block;
        width: 200px;
       height: 200px;
       background: rgb(211, 29, 29);
}

2呼猪、::first-letter 第一個字

3画畅、::first-line 第一行(以瀏覽器為準的第一行)

4、::selection 被選中的字行(鼠標選中的字段)只能向 ::selection 選擇器應用少量 CSS 屬性:color宋距、background轴踱、cursor 以及 outline。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末乡革,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子摊腋,更是在濱河造成了極大的恐慌沸版,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件兴蒸,死亡現(xiàn)場離奇詭異视粮,居然都是意外死亡,警方通過查閱死者的電腦和手機橙凳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門蕾殴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來笑撞,“玉大人,你說我怎么就攤上這事钓觉≤罘剩” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵荡灾,是天一觀的道長瓤狐。 經(jīng)常有香客問我,道長批幌,這世上最難降的妖魔是什么础锐? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮荧缘,結(jié)果婚禮上皆警,老公的妹妹穿的比我還像新娘。我一直安慰自己截粗,他們只是感情好信姓,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著桐愉,像睡著了一般财破。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上从诲,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天左痢,我揣著相機與錄音,去河邊找鬼系洛。 笑死俊性,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的描扯。 我是一名探鬼主播定页,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼绽诚!你這毒婦竟也來了典徊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤恩够,失蹤者是張志新(化名)和其女友劉穎卒落,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蜂桶,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡儡毕,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了扑媚。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片腰湾。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡雷恃,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出费坊,到底是詐尸還是另有隱情倒槐,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布葵萎,位于F島的核電站导犹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏羡忘。R本人自食惡果不足惜谎痢,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望卷雕。 院中可真熱鬧节猿,春花似錦、人聲如沸漫雕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽浸间。三九已至太雨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間魁蒜,已是汗流浹背囊扳。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留兜看,地道東北人锥咸。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像细移,于是被迫代替她去往敵國和親搏予。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361