真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

css之偽元素選擇器如何使用

這篇文章主要介紹“css之偽元素選擇器如何使用”，在日常操作中，相信很多人在css之偽元素選擇器如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css之偽元素選擇器如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)是專業(yè)的昭通網(wǎng)站建設(shè)公司，昭通接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行昭通網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

css之偽元素選擇器如何使用

偽元素選擇器

CSS中偽元素選擇器的是在指定CSS選擇器增加關(guān)鍵字。用來描述某個(gè)指定元素的特定部分設(shè)定樣式。

通過偽元素，開發(fā)者不需要借助元素的 ID 或 class 屬性就可以對被選擇元素的特定部分定義樣式。例如通過偽元素您可以設(shè)置段落中第一個(gè)字母的樣式，或者在元素之前、之后插入一些內(nèi)容等等。

在 CSS1 和 CSS2 中，偽元素的使用與偽類相同，都是使一個(gè)冒號:與選擇器相連。但在 CSS3 中，將偽元素單冒號的使用方法改為了使用雙冒號::，以此來區(qū)分偽類和偽元素。因此，建議在使用偽元素時(shí)使用雙冒號而不是單冒號。

語法結(jié)構(gòu)如下所示：

/* CSS3 語法 */
選擇器::偽元素 {
  屬性 : 屬性值;
}
/* CSS2 過時(shí)語法 (僅用來支持 IE8) */
選擇器:偽元素 {
  屬性 : 屬性值;
}

現(xiàn)在應(yīng)該都采用兩個(gè)冒號的方式，除非你還兼容IE8。

注意：一個(gè)選擇器中只能使用一個(gè)偽元素，而且偽元素必須緊跟在選擇器之后。按照最新的 W3C 規(guī)范，在定義偽元素時(shí)您應(yīng)該使用雙冒號::而不是單個(gè)冒號:，以便區(qū)分偽類和偽元素。但由于舊版本的 W3C 規(guī)范并未對此進(jìn)行特別區(qū)分，因此目前絕大多數(shù)的瀏覽器都同時(shí)支持使用單冒號和雙冒號兩種方式來定義偽元素。

CSS 中提供了一系列的偽元素，如下表所示：

偽元素例子例子描述
::afterp::after在每個(gè)

元素之后插入內(nèi)容

::beforep::before在每個(gè)

元素之前插入內(nèi)容

::first-letterp::first-letter匹配每個(gè)

元素中內(nèi)容的首字母

::first-linep::first-line匹配每個(gè)

元素中內(nèi)容的首行

::selectionp::selection匹配用戶選擇的元素部分
::placeholderinput::placeholder匹配每個(gè)表單輸入框（例如 ）的 placeholder 屬性

::before和::after偽元素

::before偽元素的作用是作為定位的HTML元素的第一個(gè)子級元素，::after** 偽元素** 的作用是作為定位的 HTML元素的最后一個(gè)子級元素。

如下示例代碼展示了::before和::after偽元素的用法：





    
    
    
    ::before和::after偽元素
    



    
這是一段測試內(nèi)容

代碼運(yùn)行結(jié)果如下圖所示：

css之偽元素選擇器如何使用

如上述示例代碼所示，::before偽元素和::after偽元素通常會(huì)配合content屬性來為該元素增加裝飾內(nèi)容。

content屬性用于在元素的::before偽元素和::after偽元素中插入內(nèi)容。該屬性具有的值如下所示：

  • none：不會(huì)產(chǎn)生偽類元素。

  • normal：::before偽元素和::after偽類元素中會(huì)被視為 none。

  • text：文本內(nèi)容。

  • url：格式為url()，指定一個(gè)外部資源（比如圖片）。如果該資源或圖片不能顯示，它就會(huì)被忽略或顯示一些占位。

::first-letter和::first-line偽元素

::first-letter和::first-line偽元素分別匹配文本的第一個(gè)字和第一行的樣式內(nèi)容。示例代碼如下：





    
    
    
    ::first-letter和::first-line偽元素
    



    
我如果愛你——絕不像攀援的凌霄花，借你的高枝炫耀自己；

代碼運(yùn)行結(jié)果如下圖所示：

css之偽元素選擇器如何使用

值得注意的是::first-letter和::first-line偽元素可以使用的CSS屬性是有限制的。

::first-letter選擇器可以設(shè)置的CSS屬性：

  • font屬性

  • color屬性

  • background屬性

  • margin屬性

  • padding屬性

  • border屬性

  • text-decoration屬性

  • vertical-align屬性

  • text-transform屬性

  • line-height屬性

  • float屬性

  • clear屬性

::first-line選擇器可以設(shè)置的CSS屬性：

  • font屬性

  • color屬性

  • background屬性

  • word-spacing屬性

  • letter-spacing屬性

  • text-decoration屬性

  • vertical-align屬性

  • text-transform屬性

  • line-height屬性

  • clear屬性

::selection偽元素

::selection偽元素的作用是匹配用戶在HTML頁面選中的文本內(nèi)容（比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分）設(shè)置高亮效果。如下示例代碼展示了::selection偽元素的用法：





    
    
    
    ::first-letter和::first-line偽元素
    



    
我如果愛你——絕不像攀援的凌霄花，借你的高枝炫耀自己；

代碼運(yùn)行結(jié)果如下圖所示：

css之偽元素選擇器如何使用

::placeholder偽元素

偽元素 ::placeholder 用來設(shè)置表單元素（、