(轉(zhuǎn))詳解 CSS 屬性 - 偽類和偽元素的區(qū)別

CSS偽類用于向某些選擇器添加特殊的效果。

CSS偽元素用于將特殊的效果添加到某些選擇器正勒。

可以明確兩點(diǎn)蜻韭,第一兩者都與選擇器相關(guān)悼尾,第二就是添加一些“特殊”的效果。這里特殊指的是兩者描述了其他css無法描述的東西肖方。


區(qū)別

這里用偽類:first-child和偽元素:first-letter來進(jìn)行比較闺魏。

p>i:first-child {color: red}

firstsecond

//偽類:first-child添加樣式到第一個(gè)子元素

如果我們不使用偽類,而希望達(dá)到上述效果俯画,可以這樣做:

.first-child {color: red}

firstsecond

即我們給第一個(gè)子元素添加一個(gè)類析桥,然后定義這個(gè)類的樣式。那么我們接著看看為元素:

p:first-letter {color: red}

I am stephen lee.

//偽元素:first-letter添加樣式到第一個(gè)字母

那么如果我們不使用偽元素艰垂,要達(dá)到上述效果泡仗,應(yīng)該怎么做呢?

.first-letter {color: red}

Iam stephen lee.

即我們給第一個(gè)字母添加一個(gè)span猜憎,然后給span增加樣式娩怎。

兩者的區(qū)別已經(jīng)出來了。那就是:

偽類的效果可以通過添加一個(gè)實(shí)際的類來達(dá)到拉宗,而偽元素的效果則需要通過添加一個(gè)實(shí)際的元素才能達(dá)到峦树,這也是為什么他們一個(gè)稱為偽類,一個(gè)稱為偽元素的原因旦事。

總結(jié)

偽元素和偽類之所以這么容易混淆,是因?yàn)樗麄兊男Ч愃贫覍懛ㄏ喾录泵穑珜?shí)際上css3為了區(qū)分兩者姐浮,已經(jīng)明確規(guī)定了偽類用一個(gè)冒號來表示,而偽元素則用兩個(gè)冒號來表示葬馋。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末卖鲤,一起剝皮案震驚了整個(gè)濱河市肾扰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蛋逾,老刑警劉巖集晚,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異区匣,居然都是意外死亡偷拔,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進(jìn)店門亏钩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來莲绰,“玉大人,你說我怎么就攤上這事姑丑「蚯” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵栅哀,是天一觀的道長震肮。 經(jīng)常有香客問我,道長留拾,這世上最難降的妖魔是什么钙蒙? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮间驮,結(jié)果婚禮上躬厌,老公的妹妹穿的比我還像新娘。我一直安慰自己竞帽,他們只是感情好扛施,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著屹篓,像睡著了一般疙渣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上堆巧,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天妄荔,我揣著相機(jī)與錄音,去河邊找鬼谍肤。 笑死啦租,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的荒揣。 我是一名探鬼主播篷角,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼系任!你這毒婦竟也來了恳蹲?” 一聲冷哼從身側(cè)響起虐块,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎嘉蕾,沒想到半個(gè)月后贺奠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡错忱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年儡率,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片航背。...
    茶點(diǎn)故事閱讀 38,059評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡喉悴,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出玖媚,到底是詐尸還是另有隱情箕肃,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布今魔,位于F島的核電站勺像,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏错森。R本人自食惡果不足惜吟宦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望涩维。 院中可真熱鬧殃姓,春花似錦、人聲如沸瓦阐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽睡蟋。三九已至踏幻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間戳杀,已是汗流浹背该面。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留信卡,地道東北人隔缀。 一個(gè)月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像坐求,于是被迫代替她去往敵國和親蚕泽。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • CSS偽類用于向某些選擇器添加特殊的效果桥嗤。 CSS偽元素用于將特殊的效果添加到某些選擇器须妻。 可以明確兩點(diǎn),第一兩者...
    曾基錕閱讀 1,193評論 0 1
  • 本文轉(zhuǎn)載自:眾成翻譯譯者:為之漫筆鏈接:http://www.zcfy.cc/article/239原文:http...
    極樂君閱讀 7,352評論 1 62
  • 一泛领、偽元素和偽類的概念 偽類:首先是類的一種荒吏,類似class,代表一些元素的狀態(tài)渊鞋,邏輯上存在绰更,文檔樹中卻無須標(biāo)識的...
    07120665a058閱讀 1,274評論 0 4
  • CSS選擇器大致可以分成5類:基本選擇器,層次選擇器锡宋,屬性選擇器儡湾,偽類,偽元素执俩⌒炷疲基本,層次役首,屬性選擇器比較容易理解...
    張歆琳閱讀 1,854評論 4 26
  • 先看定義 CSS偽類用于向某些選擇器添加特殊的效果尝丐。 CSS 偽元素用于將特殊的效果添加到某些選擇器。 可以明確兩...
    KoalaT閱讀 305評論 2 2