日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
一篇文章帶你了解CSSPseudo-elements(偽元素)

CSS Pseudo-elements 偽元素是一個(gè)附加至選擇器末的關(guān)鍵詞，允許對(duì)被選擇元素的特定部分修改樣式。CSS偽元素是一種樣式化文檔元素的方法，這些元素沒(méi)有由文檔樹(shù)中的位置明確定義。

一、什么是偽元素?

CSS偽元素允許設(shè)置元素或元素部分的樣式，而無(wú)需向其添加任何ID或類(lèi)。當(dāng)只想為段落的第一個(gè)字母設(shè)置樣式以創(chuàng)建首字下沉效果，或者只想通過(guò)樣式表在元素之前或之后插入一些內(nèi)容等情況下，這將非常有用。

CSS3 為偽元素引入了新的雙冒號(hào)(::)語(yǔ)法，以區(qū)分偽元素和偽類(lèi)。

偽元素的新語(yǔ)法可以通過(guò)以下方式給出：

 
 
 
 
    
  
  
  
  
  1. /*選擇器::偽元素{ 屬性：值 ; }*/ 
    2.

二、::first-line 第一行偽元素

該::first-line偽元素應(yīng)用特殊的樣式添加到文本的第一行。

例：(規(guī)則設(shè)置了段落中第一行文本的格式。第一行的長(zhǎng)度取決于瀏覽器窗口或包含元素的大小)。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.    
    4. 
  
  
  
  
  4.      
    5. 
  
  
  
  
  5.     CSS ::first-line第一行偽元素示例 
    6. 
  
  
  
  
  6.      
    7. 
  
  
  
  
  7.    
    8. 
  
  
  
  
  8.    
    9. 
  
  
  
  
  9.     
     
    10. 
  
  
  
  
  10.       本段的第一行與其余各行的樣式不同。 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12.       本段的第一行與其余各行的樣式不同。 
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.       本段的第一行與其余各行的樣式不同。 
    15. 
  
  
  
  
  15.  
    16. 
  
  
  
  
  16.       本段的第一行與其余各行的樣式不同。 
    17. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18.       本段的第一行與其余各行的樣式不同。 
    19. 
  
  
  
  
  19.     
     
    20. 
  
  
  
  
  20.    
    21. 
  
  
  
  
  21.  
    22.

注意：

可以應(yīng)用于::first-line偽元素的CSS屬性是：font字體屬性, background背景屬性, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height。

三、:: first-letter偽元素

::first-letter偽元素用于將特殊的樣式添加到文本的第一行的第一個(gè)字母。

例：(規(guī)則設(shè)置文本段落的首字母格式，并創(chuàng)建類(lèi)似首字下沉的效果)。

 
 
 
 
    
  
  
  
  
  1. p::first-letter { 
    2. 
  
  
  
  
  2.    color: #ff0000; 
    3. 
  
  
  
  
  3.    font-size: xx-large; 
    4. 
  
  
  
  
  4. } 
    5.

注意：

可以應(yīng)用于::first-letter偽元素的CSS屬性是：font 字體屬性, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align ，color, margin 和 padding 屬性, border 邊框?qū)傩? background 背景屬性。

如果沒(méi)有屬性float或 float屬性值為'none‘。

四、:: before和:: after偽元素

::before和::after偽元素可以用于之前或一個(gè)元素的內(nèi)容之后插入生成的內(nèi)容。

content CSS屬性與這些偽元素結(jié)合使用時(shí)，插入所生成的內(nèi)容。

這對(duì)于進(jìn)一步修飾內(nèi)容豐富的元素非常有用，這些元素不應(yīng)屬于頁(yè)面的實(shí)際標(biāo)記?？梢允褂眠@些偽元素插入常規(guī)字符串或嵌入對(duì)象(例如圖像)和其他資源。

例：

 
 
 
 
    
  
  
  
  
  1.  
    2.

五、偽元素和CSS類(lèi)

通常，只需要使用這些偽元素設(shè)置文本的某個(gè)段落或其他塊級(jí)元素的樣式。在那里，向偽元素聲明一個(gè)類(lèi)就起作用了。偽元素可以與CSS類(lèi)組合以產(chǎn)生效果，特別是對(duì)于具有該類(lèi)的元素。

例：(規(guī)則將顯示所有段落的第一個(gè)字母class="article"，以綠色，大小為xx-large。)

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.      
    4. 
  
  
  
  
  4.          
    5. 
  
  
  
  
  5.         使用CSS偽元素與css類(lèi)示例 
    6. 
  
  
  
  
  6.          
    7. 
  
  
  
  
  7.      
    8. 
  
  
  
  
  8.      
    9. 
  
  
  
  
  9.         This a sample article.
     
    10. 
  
  
  
  
  10.         
    This a normal paragraph.
     
    11. 
  
  
  
  
  11.      
    12. 
  
  
  
  
  12.  
    13.

六、總結(jié)

本文基于CSS基礎(chǔ)，主要介紹了什么是偽元素，::first-line， :: first-letter屬性在實(shí)際項(xiàng)目中的應(yīng)用，以及介紹了偽元素可以與CSS類(lèi)組合以產(chǎn)生效果。實(shí)現(xiàn)頁(yè)面的效果。

歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。

本文轉(zhuǎn)載自微信公眾號(hào)「前端進(jìn)階學(xué)習(xí)交流」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號(hào)。


當(dāng)前標(biāo)題：一篇文章帶你了解CSSPseudo-elements(偽元素)
文章轉(zhuǎn)載：http://www.5511xx.com/article/djdsjps.html