css偽類和偽元素

偽,假的意思电谣。把偽字拿掉秽梅,可以看出它們的本質(zhì)區(qū)別抹蚀,一個是類(class),一個是元素(tag)企垦,本質(zhì)區(qū)別是有沒有創(chuàng)建新的元素环壤,改變html結(jié)構(gòu)(抽象層面上)。

常見的偽類有::link , :visited , :hover , :actived , :focus(向擁有鍵盤輸入焦點的元素添加樣式) :first-child(向元素的第一個子元素添加樣式) 钞诡, :lang(向帶有l(wèi)ang屬性特定值的元素添加樣式)

常見的偽元素有:::before , ::after , ::first-letter(向文本的第一個字母添加樣式) , ::first-line(向文本的首行添加樣式)

注:::first-letter和::first-line只能作用于塊級元素郑现。

css3中偽類的定義:?

偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息。

偽類由一個冒號:開頭荧降,冒號后面是偽類的名稱和包含在圓括號中的可選參數(shù)懂酱。

任何常規(guī)選擇器可以再任何位置使用偽類。偽類語法不區(qū)別大小寫誊抛。一些偽類的作用會互斥列牺,另外一些偽類可以同時被同一個元素使用。并且拗窃,為了滿足用戶在操作DOM時產(chǎn)生的DOM結(jié)構(gòu)改變瞎领,偽類也可以是動態(tài)的。

偽元素定義:

偽元素在DOM樹中創(chuàng)建了一些抽象元素随夸,這些抽象元素是不存在于文檔語言里的(可以理解為html源碼)九默。比如:documen接口不提供訪問元素內(nèi)容的第一個字或者第一行的機制,而偽元素可以使開發(fā)者可以提取到這些信息宾毒。并且驼修,一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容(比如常見的::before,::after)。

偽元素的由兩個冒號::開頭诈铛,然后是偽元素的名稱乙各。

使用兩個冒號::是為了區(qū)別偽類和偽元素(CSS2中并沒有區(qū)別)。當(dāng)然幢竹,考慮到兼容性耳峦,CSS2中已存的偽元素仍然可以使用一個冒號:的語法,但是CSS3中新增的偽元素必須使用兩個冒號::焕毫。

一個選擇器只能使用一個偽元素蹲坷,并且偽元素必須處于選擇器語句的最后。

(為保證兼容邑飒,偽元素在書寫的時候還是采用一個冒號開頭)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末循签,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子疙咸,更是在濱河造成了極大的恐慌县匠,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異聚唐,居然都是意外死亡丐重,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門杆查,熙熙樓的掌柜王于貴愁眉苦臉地迎上來扮惦,“玉大人,你說我怎么就攤上這事亲桦⊙旅郏” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵客峭,是天一觀的道長豫领。 經(jīng)常有香客問我,道長舔琅,這世上最難降的妖魔是什么等恐? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮备蚓,結(jié)果婚禮上课蔬,老公的妹妹穿的比我還像新娘。我一直安慰自己郊尝,他們只是感情好二跋,可當(dāng)我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著流昏,像睡著了一般扎即。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上况凉,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天谚鄙,我揣著相機與錄音,去河邊找鬼茎刚。 笑死襟锐,一個胖子當(dāng)著我的面吹牛撤逢,可吹牛的內(nèi)容都是我干的膛锭。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼蚊荣,長吁一口氣:“原來是場噩夢啊……” “哼初狰!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起互例,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤奢入,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后媳叨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腥光,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡关顷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了武福。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片议双。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖捉片,靈堂內(nèi)的尸體忽然破棺而出平痰,到底是詐尸還是另有隱情,我是刑警寧澤伍纫,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布宗雇,位于F島的核電站,受9級特大地震影響莹规,放射性物質(zhì)發(fā)生泄漏赔蒲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一良漱、第九天 我趴在偏房一處隱蔽的房頂上張望嘹履。 院中可真熱鬧,春花似錦债热、人聲如沸砾嫉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽焕刮。三九已至,卻和暖如春墙杯,著一層夾襖步出監(jiān)牢的瞬間配并,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工高镐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留溉旋,地道東北人。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓嫉髓,卻偏偏與公主長得像观腊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子算行,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,452評論 2 348

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

  • 偽類與偽元素 css引入偽類和偽元素概念是為了格式化文檔樹以外的信息梧油。也就是說,偽類和偽元素是用來修飾不在文檔樹中...
    落花的季節(jié)閱讀 336評論 0 1
  • 本文轉(zhuǎn)載自:眾成翻譯譯者:為之漫筆鏈接:http://www.zcfy.cc/article/239原文:http...
    極樂君閱讀 7,363評論 1 62
  • CSS偽類: link:未被訪問的鏈接 visited:被訪問過后的樣式 hover:鼠標(biāo)放上去的樣式 activ...
    尤樊容閱讀 304評論 0 0
  • 1. 偽類 & 偽元素 偽類和偽元素用來修飾不在文檔樹中的部分 偽類:用于當(dāng)已有元素處于的某個狀態(tài)時州邢,為其添加對應(yīng)...
    楊慧莉閱讀 575評論 0 5
  • 命運就握在自己的手掌 文/長河映日 前途越是被云霧遮擋 就越要堅定信念樹立理想 人生越是遇到大風(fēng)大浪 就越要勇敢的...
    長河印日閱讀 231評論 0 4