CSS 偽元素


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 偽元素</title>
    <style>
        p.ex1:first-line{
            color: #FF00FF;
            font-variant: small-caps;
        }

        p.ex2:first-letter{
            color: #2196F3;
            font-size: 400%;
        }

        p.ex3:first-line{
            color: #2196F3;
            font-variant: small-caps;
        }

        p.ex3:first-letter{
            color: #0000ff;
            font-size: xx-large;
        }

        p.ex4:before{
            content: url("http://www.runoob.com/images/logo.png");
        }

        p.ex5:after{
            content: url("http://www.runoob.com/images/logo.png");
        }

    </style>
</head>
<body>
<h2>first-line</h2>
<p class="ex1">
    你可以使用first-line偽元素向文本的首行設置特殊樣式
    你可以使用first-line偽元素向文本的首行設置特殊樣式
    你可以使用first-line偽元素向文本的首行設置特殊樣式</p>

<h2>first-letter</h2>
<p class="ex2">
    你可以使用 "first-letter" 偽元素向文本的首字母設置特殊樣式
    你可以使用 "first-letter" 偽元素向文本的首字母設置特殊樣式
    你可以使用 "first-letter" 偽元素向文本的首字母設置特殊樣式
</p>

<h2>多個偽元素</h2>
<p class="ex3">
    你可以結合使用"first-line"和"first-letter"偽元素向文本的首行和首字母
    設置特殊樣式
    你可以結合使用"first-line"和"first-letter"偽元素向文本的首行和首字母
    設置特殊樣式
</p>


<h2>before</h2>
<p class="ex4">
    你可以使用 "before" 偽元素向文本的前面插入圖片
    你可以使用 "before" 偽元素向文本的前面插入圖片
    你可以使用 "before" 偽元素向文本的前面插入圖片
</p>
<p><b>注意:</b>僅當 !DOCTYPE 已經聲明 IE8 支持這個內容屬性</p>

<h2>after</h2>
<p class="ex5">
    你可以使用 "before" 偽元素向文本的后面插入圖片
    你可以使用 "before" 偽元素向文本的后面插入圖片
    你可以使用 "before" 偽元素向文本的后面插入圖片
</p>


</body>
</html>

<!--

語法
偽元素的語法：

selector:pseudo-element {property:value;}
CSS類也可以使用偽元素：

selector.class:pseudo-element {property:value;}

-->

<!--


:first-line 偽元素
"first-line" 偽元素用于向文本的首行設置特殊樣式雄坪。

在下面的例子中，瀏覽器會根據(jù) "first-line" 偽元素中的樣式對 p 元素的第一行文本進行格式化：

實例
p:first-line
{
    color:#ff0000;
    font-variant:small-caps;
}


注意："first-line" 偽元素只能用于塊級元素。

注意： 下面的屬性可應用于 "first-line" 偽元素：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

-->

<!--

:first-letter 偽元素
"first-letter" 偽元素用于向文本的首字母設置特殊樣式：

實例
p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}

嘗試一下 ?
注意： "first-letter" 偽元素只能用于塊級元素友存。

注意： 下面的屬性可應用于 "first-letter" 偽元素：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear


-->

<!--

偽元素和CSS類
偽元素可以結合CSS類：

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>
上面的例子會使所有 class 為 article 的段落的首字母變?yōu)榧t色舒萎。


-->

<!--


多個偽元素
可以結合多個偽元素來使用爷速。

在下面的例子中畏铆，段落的第一個字母將顯示為紅色杂靶，其字體大小為 xx-large坞古。
第一行中的其余文本將為藍色备韧，并以小型大寫字母顯示。

段落中的其余文本將以默認字體大小和顏色來顯示：

實例
p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line
{
    color:#0000ff;
    font-variant:small-caps;
}

-->


<!--


CSS - :before 偽元素
":before" 偽元素可以在元素的內容前面插入新內容痪枫。

下面的例子在每個 <h1>元素前面插入一幅圖片：

實例
h1:before
{
    content:url(smiley.gif);
}

-->

<!--


CSS - :after 偽元素
":after" 偽元素可以在元素的內容之后插入新內容织堂。

下面的例子在每個 <h1> 元素后面插入一幅圖片：

實例
h1:after
{
    content:url(smiley.gif);
}

-->


<!--


所有CSS偽類/元素
選擇器 示例  示例說明
:link   a:link  選擇所有未訪問鏈接
:visited    a:visited   選擇所有訪問過的鏈接
:active a:active    選擇正在活動鏈接
:hover  a:hover 把鼠標放在鏈接上的狀態(tài)
:focus  input:focus 選擇元素輸入后具有焦點
:first-letter   p:first-letter  選擇每個<p> 元素的第一個字母
:first-line p:first-line    選擇每個<p> 元素的第一行
:first-child    p:first-child   選擇器匹配屬于任意元素的第一個子元素的 <]p> 元素
:before p:before    在每個<p>元素之前插入內容
:after  p:after 在每個<p>元素之后插入內容
:lang(language) p:lang(it)  為<p>元素的lang屬性選擇一個開始值



-->


<!--

偽類選擇元素基于的是當前元素處于的狀態(tài)，或者說元素當前所具有的特性奶陈，
而不是元素的id易阳、class、屬性等靜態(tài)的標志吃粒。
由于狀態(tài)是動態(tài)變化的潦俺，所以一個元素達到一個特定狀態(tài)時，它可能得到一個偽類的樣式徐勃；
當狀態(tài)改變時事示，它又會失去這個樣式。
由此可以看出僻肖，它的功能和class有些類似肖爵，但它是基于文檔之外的抽象，所以叫偽類臀脏。

與偽類針對特殊狀態(tài)的元素不同的是劝堪，偽元素是對元素中的特定內容進行操作法挨，
它所操作的層次比偽類更深了一層，也因此它的動態(tài)性比偽類要低得多幅聘。
實際上凡纳，設計偽元素的目的就是去選取諸如元素內容第一個字（母）、第一行帝蒿，
選取某些內容前面或后面這種普通的選擇器無法完成的工作荐糜。
它控制的內容實際上和元素是相同的，但是它本身只是基于元素的抽象葛超，
并不存在于文檔中暴氏，所以叫偽元素。




-->
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末绣张，一起剝皮案震驚了整個濱河市答渔，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌侥涵，老刑警劉巖沼撕，帶你破解...
    沈念sama閱讀 222,252評論 6贊 516
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異芜飘，居然都是意外死亡务豺，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門嗦明，熙熙樓的掌柜王于貴愁眉苦臉地迎上來笼沥，“玉大人，你說我怎么就攤上這事娶牌”记常” “怎么了？”我有些...
    開封第一講書人閱讀 168,814評論 0贊 361
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵诗良，是天一觀的道長汹桦。 經常有香客問我，道長累榜，這世上最難降的妖魔是什么营勤？ 我笑而不...
    開封第一講書人閱讀 59,869評論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任灵嫌，我火速辦了婚禮壹罚，結果婚禮上，老公的妹妹穿的比我還像新娘寿羞。我一直安慰自己猖凛，他們只是感情好，可當我...
    茶點故事閱讀 68,888評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布绪穆。 她就那樣靜靜地躺著辨泳，像睡著了一般虱岂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上菠红，一...
    開封第一講書人閱讀 52,475評論 1贊 312
  • 城市分裂傳說
    那天第岖，我揣著相機與錄音，去河邊找鬼试溯。 笑死蔑滓，一個胖子當著我的面吹牛，可吹牛的內容都是我干的遇绞。 我是一名探鬼主播键袱，決...
    沈念sama閱讀 41,010評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼摹闽！你這毒婦竟也來了蹄咖？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 39,924評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤付鹿，失蹤者是張志新（化名）和其女友劉穎澜汤，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舵匾，經...
    沈念sama閱讀 46,469評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡银亲，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,552評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了纽匙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片务蝠。...
    茶點故事閱讀 40,680評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖烛缔，靈堂內的尸體忽然破棺而出馏段，到底是詐尸還是另有隱情，我是刑警寧澤践瓷，帶...
    沈念sama閱讀 36,362評論 5贊 351
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布院喜，位于F島的核電站，受9級特大地震影響晕翠，放射性物質發(fā)生泄漏喷舀。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 42,037評論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一淋肾、第九天 我趴在偏房一處隱蔽的房頂上張望硫麻。 院中可真熱鬧，春花似錦樊卓、人聲如沸拿愧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,519評論 0贊 25
  • 一樁弒父案碌尔，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽浇辜。三九已至券敌，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間柳洋，已是汗流浹背待诅。 一陣腳步聲響...
    開封第一講書人閱讀 33,621評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留熊镣，地道東北人咱士。 一個月前我還...
    沈念sama閱讀 49,099評論 3贊 378
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像轧钓，于是被迫代替她去往敵國和親序厉。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 45,691評論 2贊 361

推薦閱讀更多精彩內容