前言

今天主要談談css的偽類和偽元素。其實，關于偽類和偽元素，我在小工具CSS 選擇器演示 中，寫了不少偽類和偽元素，大家可以去看一下！

偽類和偽元素的理解

官方解釋

偽類一開始單單只是用來表示一些元素的動態狀態，典型的就是鏈接的各個狀態(LVHA)。隨后CSS2標準擴展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類。

偽元素則代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實際存在于文檔樹中。

我自己的理解：

偽類，類，html' target='_blank'>class是一個類，就類似class這樣，表示一些元素的狀態的，但是無須標識的分類。

偽元素，就是一個元素，類似p標簽元素，等等，邏輯上存在，但是實際并不存在在文檔樹中。

另外一個簡單的理解和區分就是：

偽類前面是一個冒號，為元素前面是兩個冒號。E:first-child 偽類，E::first-line為元素。

特殊情況::before 和 ::after 偽元素

before 和after是在元素前面和后面添加一些元素，因此是偽元素，CSS3選擇器中已經將其前面變為兩個冒號了。請看：w3cselect

問題來了，那么為什么我們平時用before和after前面就一個冒號？

當你看了css2選擇器就知道了，老的規范中，偽類和偽元素都用一個冒號，新規范為了區分，偽元素統一用兩個“：：”,所以，大家注意了，往后在寫css3的時候，為元素要用兩個冒號，偽類用一個冒號。

偽類和偽元素的應用

我之前的css常用效果，講了一些。

像偽元素

::-webkit-scrollbar::selection::-webkit-input-placeholder ::after

等等。

偽元素中用的最多的要數::after和::before了

可以用這兩個偽元素做很多效果！

html a href= # haorooms /a a { position: relative; display: inline-block; outline: none; text-decoration: none; color: #000; font-size: 32px; padding: 5px 10px;}a:hover::before, a:hover::after { position: absolute; }a:hover::before { content: /5B left: -20px; }a:hover::after { content: /5D right: -20px; }

其中content中可以用attr也可以用url

例如：

a：:after { content: ( attr(href) ) } h1::before { content: url(logo.png); }

偽類中用的最多的要數：nth-child()選擇器了，關于nth-child()，我之前有篇文章介紹過。

以上就是淺談對css偽類和偽元素的理解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。