css3偽類和偽元素有哪些
本文小編為大家詳細(xì)介紹“css3偽類和偽元素有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css3偽類和偽元素有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
成都創(chuàng)新互聯(lián)公司專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，成都多線機(jī)房，成都多線機(jī)房，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。
在css3中，偽類是一種用于已有元素處于某種狀態(tài)時(shí)為其添加對應(yīng)樣式的選擇器，且這個(gè)狀態(tài)是根據(jù)用戶行為而動態(tài)變化的；而偽元素的意思為"假元素"或者"偽裝元素"，是一個(gè)用于創(chuàng)建一些不在DOM樹中的元素，并為其添加樣式的選擇器。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
偽類是什么
偽類是一種用于已有元素處于某種狀態(tài)時(shí)（滑動、點(diǎn)擊等）為其添加對應(yīng)樣式的選擇器，且這個(gè)狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。
例如：當(dāng)用戶懸停在指定元素時(shí)，可以通過:hover來描述這個(gè)元素的狀態(tài)，雖然它和一般css相似，可以為已有元素添加樣式，但是它只有處于DOM樹無法描述的狀態(tài)下才能為元素添加樣式，所以稱為偽類。
偽元素是什么
偽元素直義理解就是"假元素"或者"偽裝元素"。其實(shí)也可以這么理解， 偽元素實(shí)際上就是虛擬的元素，不存在的元素(code形式), 你也無發(fā)在文檔中找到他們，因此說偽元素是虛擬元素。
偽元素是一個(gè)用于創(chuàng)建一些不在DOM樹中的元素，并為其添加樣式的選擇器。
通過偽元素您不需要借助元素的 ID 或 class 屬性就可以對被選擇元素的特定部分定義樣式。例如通過偽元素您可以設(shè)置段落中第一個(gè)字母的樣式，或者在元素之前、之后插入一些內(nèi)容等等。
偽類和偽元素的區(qū)別：
請看下面例子：
例一：
<ul> <li>第一列</li> <li>第二列</li> </ul>
如果我們想要給第一列添加樣式，我們可以通過以下兩種方式：
（1）給第一列添加一個(gè)類，并在該類中定義樣式：
<ul> <li class="first-item">第一列</li> <li>第二列</li></ul> </ul>
.first-item{color:orange;}（2）如果不用添加類的方法，我們可以通過給第一個(gè)<li>設(shè)置:first-child偽類來為其添加樣式，這時(shí)，被修飾的li依然存在于DOM樹中
<ul> <li>第一個(gè)</li> <li>第二個(gè)</li> </ul>
li:first-child{color:orage;}例二：
<p>Hello World, and wish you have a good day!</p>
想要給該段落第一個(gè)字母添加樣式，可以有以下方法：
（1）給第一個(gè)字母包裹<span>元素，并給span設(shè)置樣式：
<p> <span class="first">H</span>ello World, and wish you have a good day! </p>
.first{color:red;}（2）如果不創(chuàng)建<span>元素，我們可以通過給<p>元素設(shè)置P:first-letter偽元素為其添加樣式，這時(shí)看起來像創(chuàng)建了一個(gè)虛擬的span元素并為其添加樣式，但實(shí)際上在DOM數(shù)中并不存在這個(gè)span元素
<p>Hello World, and wish you have a good day!</p>
p:first-letter{color:red;}從上述例子中我們可以看出：偽類的操作對象是文檔樹中已有的元素，而偽元素則創(chuàng)建了一個(gè)文檔樹外的元素。因此，偽類與偽元素的區(qū)別在于：有沒有創(chuàng)建一個(gè)文檔樹之外的元素。
偽元素使用單冒號還是雙冒號？
css3規(guī)范中要求使用雙冒號（::）表示偽元素，以此來區(qū)分偽類和偽元素，比如::before和::after等偽元素使用雙冒號（::），:hover和:active偽類使用單冒號（:）。除了一些低于IE8版本的瀏覽器外，大部分瀏覽器都支持偽元素的雙冒號(::)表示方法。
然而除了少部分偽元素如::backdrop必須使用雙冒號（::），大部分偽元素都支持單冒號和雙冒號的寫法，比如::after，寫成:after一樣可以正常運(yùn)行。
w3c標(biāo)準(zhǔn)中說到，雖然CSS3標(biāo)準(zhǔn)要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向后兼容，我們建議你在目前還是使用單冒號的寫法。
常用偽類有：
:active 選擇正在被激活的元素（匹配指定狀態(tài)）
:hover 選擇被鼠標(biāo)懸浮著的元素（匹配指定狀態(tài)）
:link 選擇未被訪問的元素 （匹配指定狀態(tài)）
:visited 選擇已被訪問的元素（匹配指定狀態(tài)）
:first-child 選擇滿足是其父元素的第一個(gè)子元素的元素
:lang(value) 選擇帶有指定 lang 屬性的元素
:focus 選擇擁有鍵盤輸入焦點(diǎn)的元素
:enable 選擇每個(gè)已啟動的元素
:disable 選擇每個(gè)已禁止的元素
:checked 選擇每個(gè)被選中的元素
:target 選擇當(dāng)前的錨點(diǎn)元素
:first-of-type 選擇滿足是其父元素的第一個(gè)某類型子元素的元素
:last-of-type 選擇滿足是其父元素的最后一個(gè)某類型子元素的元素
:only-of-type 選擇滿足是其父元素的唯一一個(gè)某類型子元素的元素
:nth-of-type(n) 選擇滿足是其父元素的第n個(gè)某類型子元素的元素
:nth-last-of-type(n) 選擇滿足是其父元素的倒數(shù)第n個(gè)某類型的元素
:only-child 選擇滿足是其父元素的唯一一個(gè)子元素的元素
:last-child 選擇滿足是其父元素的最后一個(gè)元素的元素
:nth-child(n) 選擇滿足是其父元素的第n個(gè)子元素的元素
:nth-last-child(n) 選擇滿足是其父元素的倒數(shù)第n個(gè)子元素的元素
:empty 選擇滿足沒有子元素的元素
:in-range 選擇滿足值在指定范圍內(nèi)的元素
:out-of-range 選擇值不在指定范圍內(nèi)的元素
:invalid 選擇滿足值為無效值的元素
:valid 選擇滿足值為有效值的元素
:not(selector) 選擇不滿足selector的元素
:optional 選擇為可選項(xiàng)的表單元素，即沒有“required”屬性
:read-only 選擇有"readonly"的表單元素
:read-write 選擇沒有"readonly"的表單元素
:root 選擇根元素
常用偽元素
::first-letter 選擇指定元素的第一個(gè)單詞
::first-line 選擇指定元素的第一行
::after 在指定元素的內(nèi)容前面插入內(nèi)容
::before 在指定元素的內(nèi)容后面插入內(nèi)容
::selection 選擇指定元素中被用戶選中的內(nèi)容
讀到這里，這篇“css3偽類和偽元素有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享題目：css3偽類和偽元素有哪些
文章來源：http://muchs.cn/article6/jpegog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、建站公司、ChatGPT、移動網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
