這篇文章主要講解了“CSS的偽元素有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS的偽元素有哪些”吧！

創(chuàng)新互聯(lián)建站專(zhuān)注于東興網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供東興營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，東興網(wǎng)站制作、東興網(wǎng)頁(yè)設(shè)計(jì)、東興網(wǎng)站官網(wǎng)定制、重慶小程序開(kāi)發(fā)服務(wù)，打造東興網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供東興網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

什么是偽元素

偽元素和偽類(lèi)是 CSS 初學(xué)者容易搞混的兩個(gè)概念。

偽元素：是一個(gè)附加至選擇器末的關(guān)鍵詞，允許你對(duì)被選擇元素的特定部分修改樣式。例如::before，::after，::first-letter等。它是創(chuàng)造出一個(gè)并不存在的“元素”內(nèi)容，并附加樣式。

偽類(lèi)：沒(méi)有創(chuàng)造元素內(nèi)容，只是選中某些狀態(tài)下的已有元素，并附加樣式。比如:first-child，:active，:focus等等。

偽元素和偽類(lèi)之所以這么容易混淆，是因?yàn)樗麄兊男Ч?lèi)似而且寫(xiě)法相仿。但實(shí)際上 CSS3  為了區(qū)分兩者，已經(jīng)明確規(guī)定了偽類(lèi)用一個(gè)冒號(hào)來(lái)表示，而偽元素則用兩個(gè)冒號(hào)來(lái)表示。

:Pseudo-classes         //偽類(lèi)  ::Pseudo-elements       //偽元素

但因?yàn)榧嫒菪缘膯?wèn)題，現(xiàn)在大部分還是統(tǒng)一的單冒號(hào)。不過(guò)我們?cè)跁?shū)寫(xiě)時(shí)應(yīng)該盡可能養(yǎng)成好習(xí)慣，區(qū)分兩者。

下面逐一介紹這 5 個(gè)偽元素。

1::first-letter

對(duì)塊級(jí)元素第一行的第一個(gè)字符設(shè)置樣式，并且這個(gè)字符前面沒(méi)有其他內(nèi)容(例如圖片或者內(nèi)聯(lián)表格)，只對(duì)塊級(jí)元素生效。這個(gè)偽元素在博客文章用得比較多，比如：

::first-letter

用偽類(lèi)實(shí)現(xiàn)就比較簡(jiǎn)單了：

p {   width: 500px;   line-height: 1.5; }  h3 + p::first-letter {   color: white;   background-color: black;   border-radius: 2px;   box-shadow: 3px 3px 0 red;   font-size: 250%;   padding: 6px 3px;   margin-right: 6px;   float: left; }

要是不用這個(gè)偽類(lèi)實(shí)現(xiàn)相同的效果，想想都覺(jué)得麻煩。

2::first-line

跟::first-letter類(lèi)似，用于設(shè)置文本或者塊級(jí)元素的第一行內(nèi)容的樣式。

::first-line {   color: blue;   text-transform: uppercase;    /* WARNING: 這些樣式不起作用 */   /* 很多屬性在 ::first-line 偽元素里是無(wú)效的 */   margin-left: 20px;   text-indent: 20px; }

::first-line {

3::selection

設(shè)置元素被用戶選中高亮后的樣式。對(duì)該偽元素生效的樣式屬性只有三個(gè)：

• color

• background properties (background-color, background-image, etc.)

• text-shadow

::selection

4::backdrop

這個(gè)偽元素有點(diǎn)面生，它是跟 viewport 大小一致的盒子，當(dāng)頁(yè)面處于全屏模式時(shí)充當(dāng)背景。比如利用它設(shè)置全屏視頻的背景色：

video::backdrop {   background-color: #448; }

::backdrop

5::placeholder

<input>或者<textarea>的輸入提示性文字，默認(rèn)是灰色的，可以自定義文字樣式。

input::placeholder {   color: red;   font-size: 1.2em;   font-style: italic; }

::placeholder

感謝各位的閱讀，以上就是“CSS的偽元素有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS的偽元素有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

標(biāo)題名稱：CSS的偽元素有哪些
文章URL：http://sd-ha.com/article30/gpssso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、微信公眾號(hào)、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、企業(yè)建站、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)