偽元素&偽類深度解析

偽類 偽元素區(qū)別

? 如果你耐著性子看完了 你就贏了

Css2中定義模糊:給某些選擇器添加特殊的效果
Css3中進(jìn)行了區(qū)分:
the pseudo-class is introduced to permit selection based on information that lies 
outside of the document tree or that cannot be expressed using other simple selectors

偽類作用于dom樹之外的元素或者是通過簡單的CSS選擇器無法實(shí)現(xiàn)篩選的場(chǎng)景梯醒;
A pseudo-class always consist of a colon followed by the name of pseudo-class
and optionally by a value between parenthness
在偽類名稱之前會(huì)有一個(gè)冒號(hào):,并且還有可能含有圓括號(hào)卢肃;
Pseudo-classes are allowed in all sequences of simple selectors contained in a
 selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, 
after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive
, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic,
 in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.
偽類對(duì)大小寫不敏感介返,有些互相排斥,有些能夠一起使用;

常用偽類

:active , //被激活的元素
:focus  //鍵盤輸入焦點(diǎn)的元素
:hover 
:link, //未被訪問的元素添加樣式
:visit //已訪問的鏈接
:first-child //元素第一個(gè)子元素
:lang //指定lang屬性的元素

偽元素

css3中新增偽元素使用 ::
對(duì)于css2中定義的偽元素 仍可以使用 :
Only one pseudo-element may appear per selector, and 
if present it must appear after the sequence of simple 
selectors that represents the subjects of the selector.
一個(gè)選擇器只能有一個(gè)偽元素蒋伦,并且位于選擇器語句的最后
  • exmple
q:lang(de)::after{
    content: " (German) ";
}
q:lang(en)::after{
    content: " (English) ";
}
q:lang(fr)::after{
    content: "(French) ";
}
q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

結(jié)果:

瀏覽器運(yùn)行結(jié)果

其余的特殊標(biāo)記例如:.. ' << ' 為瀏覽器自帶 ::before樣式

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末弓摘,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子痕届,更是在濱河造成了極大的恐慌韧献,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件研叫,死亡現(xiàn)場(chǎng)離奇詭異锤窑,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)嚷炉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門渊啰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人申屹,你說我怎么就攤上這事绘证。” “怎么了哗讥?”我有些...
    開封第一講書人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵嚷那,是天一觀的道長。 經(jīng)常有香客問我杆煞,道長魏宽,這世上最難降的妖魔是什么腐泻? 我笑而不...
    開封第一講書人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮队询,結(jié)果婚禮上派桩,老公的妹妹穿的比我還像新娘。我一直安慰自己蚌斩,他們只是感情好铆惑,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著凳寺,像睡著了一般鸭津。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肠缨,一...
    開封第一講書人閱讀 51,708評(píng)論 1 305
  • 那天逆趋,我揣著相機(jī)與錄音,去河邊找鬼晒奕。 笑死闻书,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的脑慧。 我是一名探鬼主播魄眉,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼闷袒!你這毒婦竟也來了坑律?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤囊骤,失蹤者是張志新(化名)和其女友劉穎晃择,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體也物,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡宫屠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了滑蚯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浪蹂。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖告材,靈堂內(nèi)的尸體忽然破棺而出坤次,到底是詐尸還是另有隱情,我是刑警寧澤创葡,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布浙踢,位于F島的核電站,受9級(jí)特大地震影響灿渴,放射性物質(zhì)發(fā)生泄漏洛波。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一骚露、第九天 我趴在偏房一處隱蔽的房頂上張望蹬挤。 院中可真熱鬧,春花似錦棘幸、人聲如沸焰扳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽吨悍。三九已至,卻和暖如春蹋嵌,著一層夾襖步出監(jiān)牢的瞬間育瓜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來泰國打工栽烂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留躏仇,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓腺办,卻偏偏與公主長得像焰手,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子怀喉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355

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

  • 本文轉(zhuǎn)載自:眾成翻譯譯者:為之漫筆鏈接:http://www.zcfy.cc/article/239原文:http...
    極樂君閱讀 7,376評(píng)論 1 62
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案书妻? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • CSS參考手冊(cè) 一、初識(shí)CSS3 1.1 CSS是什么 CSS3在CSS2.1的基礎(chǔ)上增加了很多強(qiáng)大的新功能躬拢。目前...
    沒汁帥閱讀 3,584評(píng)論 1 13
  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,314評(píng)論 2 66
  • 近兩日?qǐng)@里接了教師同課異構(gòu)活動(dòng)躲履,跟著看了幾個(gè)活動(dòng),精彩紛呈之中估灿,偶然有幾個(gè)小環(huán)節(jié)打動(dòng)人心崇呵,匆匆記錄。 1.讓孩子真...
    珠落玉盤a閱讀 123評(píng)論 0 0