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

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

什么是偽元素

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

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

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

偽元素和偽類之所以這么容易混淆，是因為他們的效果類似而且寫法相仿。但實際上 CSS3  為了區(qū)分兩者，已經(jīng)明確規(guī)定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。

:Pseudo-classes         //偽類  ::Pseudo-elements       //偽元素

但因為兼容性的問題，現(xiàn)在大部分還是統(tǒng)一的單冒號。不過我們在書寫時應(yīng)該盡可能養(yǎng)成好習慣，區(qū)分兩者。

下面逐一介紹這 5 個偽元素。

1::first-letter

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

::first-letter

用偽類實現(xià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; }

要是不用這個偽類實現(xiàn)相同的效果，想想都覺得麻煩。

2::first-line

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

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

::first-line {

3::selection

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

• color

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

• text-shadow

::selection

4::backdrop

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

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

::backdrop

5::placeholder

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

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

::placeholder

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

標題名稱：CSS的偽元素有哪些
文章URL：http://jinyejixie.com/article30/gpssso.html

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

廣告

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