css3 選擇器:偽元素(四)

::first-letter
::first-line
::before
::after
::selection
:: 雙冒號與 : 單冒號其實是一樣的,使用雙冒號是 css3 為了區(qū)分偽元素與其他偽類選擇器而修改的丈积,最終都會被瀏覽器識別成雙冒號筐骇,::selection 無法使用單冒號。
  • ::first-letter
<style>
p::first-letter{font-size: 40px; float: left;}
</style>
<body>
    <p>中新網(wǎng)北京6月14日電 (記者 李金磊)隨著天津提高2017年最低工資江滨,記者梳理發(fā)現(xiàn)铛纬,今年以來,至少已有上海唬滑、深圳告唆、陜西、山東晶密、青海擒悬、福建、天津等7個地區(qū)上調(diào)了最低工資標準稻艰。其中懂牧,上海、深圳尊勿、天津的月最低工資標準超過了2000元大關(guān)僧凤。</p>
</body>

::first-letter 可以匹配標簽內(nèi)容的首個字符,利用該方法可以很方便的排版首字符下沉浮動元扔,只能適用塊級元素拼弃。

  • :first-line
<style>
p::first-line{font-size: 40px;}
</style>
<body>
    <p>中新網(wǎng)北京6月14日電 (記者 李金磊)隨著天津提高2017年最低工資,記者梳理發(fā)現(xiàn)摇展,今年以來,至少已有上海溺忧、深圳咏连、陜西、山東鲁森、青海祟滴、福建、天津等7個地區(qū)上調(diào)了最低工資標準歌溉。其中垄懂,上海骑晶、深圳、天津的月最低工資標準超過了2000元大關(guān)草慧。</p>
</body>

::first-line 匹配標簽內(nèi)容的首行文字桶蛔,只能適用塊級元素。

  • ::before
<style>
p::before{ display: block; content: 'aa'; width: 40px; height: 40px; background-color: red;}
</style>
<body>
    <p>1-1</p>
</body>

::before 可以在元素內(nèi)部最前面生成一個元素漫谷,并以 content 為文本內(nèi)容顯示出來仔雷,而且 content 是必須的。

  • ::after
<style>
p::after{display: block; content: 'bb'; width: 40px; height: 40px; background-color: red;}
</style>
<body>
    <p>1-1</p>
</body>

::after 可以在元素內(nèi)部最后生成一個元素舔示,并以 content 為文本內(nèi)容顯示出來碟婆,而且 content 是必須的。

  • ::selection
<style>
p::selection{ background: red;}
</style>
<body>
    <p>中新網(wǎng)北京6月14日電 (記者 李金磊)隨著天津提高2017年最低工資惕稻,記者梳理發(fā)現(xiàn)竖共,今年以來,至少已有上海俺祠、深圳公给、陜西、山東锻煌、青海妓布、福建、天津等7個地區(qū)上調(diào)了最低工資標準宋梧。其中匣沼,上海、深圳捂龄、天津的月最低工資標準超過了2000元大關(guān)释涛。</p>
</body>

::selection 適配選中文案的樣式,但只會對 background-colorcolor 生效倦沧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末唇撬,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子展融,更是在濱河造成了極大的恐慌窖认,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件告希,死亡現(xiàn)場離奇詭異扑浸,居然都是意外死亡,警方通過查閱死者的電腦和手機燕偶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門喝噪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人指么,你說我怎么就攤上這事酝惧×穸Γ” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵晚唇,是天一觀的道長巫财。 經(jīng)常有香客問我,道長缺亮,這世上最難降的妖魔是什么翁涤? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮萌踱,結(jié)果婚禮上葵礼,老公的妹妹穿的比我還像新娘。我一直安慰自己并鸵,他們只是感情好鸳粉,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著园担,像睡著了一般届谈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上弯汰,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天艰山,我揣著相機與錄音,去河邊找鬼咏闪。 笑死曙搬,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的鸽嫂。 我是一名探鬼主播纵装,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼据某!你這毒婦竟也來了橡娄?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤癣籽,失蹤者是張志新(化名)和其女友劉穎挽唉,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體筷狼,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡橱夭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了桑逝。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡俏让,死狀恐怖楞遏,靈堂內(nèi)的尸體忽然破棺而出茬暇,到底是詐尸還是另有隱情,我是刑警寧澤寡喝,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布糙俗,位于F島的核電站,受9級特大地震影響预鬓,放射性物質(zhì)發(fā)生泄漏巧骚。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一格二、第九天 我趴在偏房一處隱蔽的房頂上張望劈彪。 院中可真熱鬧,春花似錦顶猜、人聲如沸沧奴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽滔吠。三九已至,卻和暖如春挠日,著一層夾襖步出監(jiān)牢的瞬間疮绷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工嚣潜, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留冬骚,地道東北人。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓郑原,卻偏偏與公主長得像唉韭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子犯犁,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

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