首頁 > web前端 > css教學 > 主體

CSS3中增加的偽類有哪些及其作用是什麼?

不言
發布: 2018-08-09 16:03:34
原創
2729 人瀏覽過

本篇文章帶給大家的內容是關於CSS3中增加的偽類有哪些及其作用是什麼?有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

1. 偽類別與偽元素

CSS偽類別:用於為某些選擇器新增特殊的效果。

CSS偽元素:用於將特殊的效果新增至某些選擇器。偽元素代表了某個元素的子元素,這個子元素雖然在邏輯上存在,但卻不實際存在於文檔樹中。

##:: before在某元素之前插入某些內容::after在某元素之後插入某些內容
偽元素 作用
#::first-letter 將樣式加入到文字的首字母
::first-line 將樣式加入到文字的首行
# 偽類的效果可以透過添加一個實際的類別來達到,而偽元素的效果則需要透過添加一個實際的元素才能達到,這也是為什麼他們一個稱為偽類,一個稱為偽元素的原因。

CSS3為了區分偽類和偽元素,已經明確規定了偽類用一個冒號來表示,而偽元素則用兩個冒號來表示。但因為相容性的問題,所以現在大部分還是統一的單冒號,但是拋開兼容性的問題,我們在書寫時應該盡可能養成好習慣,區分兩者。

單冒號(:)用於CSS3偽類,雙冒號(::)用於CSS3偽元素。偽元素由雙冒號和偽元素名稱組成。不過瀏覽器需要同時支援舊的已經存在的偽元素寫法,例如:first-line、:first-letter、:before、:after等,而新的CSS3中引入的偽元素則不允許再支援舊的單冒號的寫法。

2、CSS3新增偽類別

新增偽類別作用# #p:first-of-type選擇屬於其父元素的首個

元素的每個

元素。

p:last-of-type選擇屬於其父元素的最後

元素的每個

元素。

p:only-of-type選擇屬於其父元素唯一的

元素的每個

元素。

p:only-child選擇屬於其父元素唯一的子元素的每個

元素。

p:nth-child(n)選擇屬於其父元素的第n個子元素的每個

元素。

p:nth-last-child(n)選擇屬於其父元素的倒數第n個子元素的每個

元素。

p:nth-of-type(n)選擇屬於其父元素第n個

元素的每個

元素。

p:nth-last-of-type(n) #選擇屬於其父元素倒數第n個

元素的每個

p:last-child選擇屬於其父元素最後一個子元素的每個

元素。

p:empty選擇每個沒有子元素的

元素(包含文字節點)。

p:target #選擇目前活動的

元素。

:not(p)選擇非

元素的每個元素。

:enabled控製表單控制項的可用狀態。 :disabled 控製表單控制項的停用狀態。 :checked 單選方塊或複選框被選取。
#偽類別#作用:hover將樣式加入滑鼠懸浮的元素:active將樣式加入已啟動的元素:focus將樣式新增至獲得焦點的元素:link將樣式新增至未被造訪的連結:visited將樣式加入被造訪的連結:first-child將樣式新增到元素的第一個子元素:lang定義指定的元素中所使用的語言

相關推薦:

css選擇器有哪些類型? css常用選擇器的簡單介紹

什麼是css? css三種樣式以及文字屬性的介紹

####

以上是CSS3中增加的偽類有哪些及其作用是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!