首頁 > web前端 > html教學 > 什麼是偽類和偽元素?偽類和偽元素的區別的區別詳解

什麼是偽類和偽元素?偽類和偽元素的區別的區別詳解

云罗郡主
發布: 2018-10-27 11:21:39
轉載
19874 人瀏覽過

這篇文章帶給大家的內容是關於什麼是偽類和偽元素?偽類和偽元素的區別的區別詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

1、偽類別類型

什麼是偽類和偽元素?偽類和偽元素的區別的區別詳解

2、偽元素類型

什麼是偽類和偽元素?偽類和偽元素的區別的區別詳解

(1)偽類別作用對像是整個元素

例如:

a:link
{color:#111}
a:hover
{color:#222}
div:first-child
{color:#333}
div:nth-child(3)
{color:#444}
登入後複製

儘管這些條件不是基於DOM的,但結果每一個都是作用於一個完整的元素,比如整個鏈接,段落,div等等。

(2)偽元素作用於元素的一部分

p::first-line
{color:#555}
p::first-letter
{color:#666}
a::before
{content : "hello
world";}
登入後複製

(3)偽元素作用於元素的一部分:一個段落的第一行或第一個字母。

總結:偽元素其實相當於偽造了一個元素,例如before,first-letter達到的效果就是偽造了一個元素,然後添加了其相應的效果而已;而偽類沒有偽造元素,例如first-child只是為子元素添加樣式而已。

偽元素和偽類之所以這麼容易混淆,是因為他們的效果類似而且寫法相仿,但實際上css3 為了區分兩者,已經明確規定了偽類用一個冒號來表示,而偽元素則用兩個冒號來表示。

但因為相容性的問題,所以現在大部分還是統一的單冒號,但是拋開相容性的問題,我們在書寫時應該盡可能養成好習慣,區分兩者。

以上就是對什麼是偽類別和偽元素?偽類和偽元素的區別的區別詳解的全部介紹,希望大家可以有所收穫,更多HTML視頻教程請關注PHP中文網。


以上是什麼是偽類和偽元素?偽類和偽元素的區別的區別詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:lvyestudy.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板