資訊專欄INFORMATION COLUMN
摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內容前面插入新的內容。二偽類和偽元素的區(qū)別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。
一：:before && :after的用法 :before
如同對偽元素的名稱一樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明：
.before:before{content:"you before"; color:red;}
me
在這里我們給偽元素 :before 添加了屬性 content，并賦值為 you before。我們來看效果：
//在指定元素的內容 me 前添加了新內容 you before
我們不難發(fā)現(xiàn)這里通過偽元素 :before 添加的新內容區(qū)域默認的 display 屬性值為 inline，那么我們可不可以修改新內容區(qū)域的屬性，答案是肯定的。你可以像修改其他元素一樣修改它的樣式，我們來將它的 display 屬性值來改為block。
.before:before{content:"you before"; display:block; color:red;}
me
現(xiàn)在我們再來看下效果：
//由偽元素 :before 生成新內容區(qū)域果然變?yōu)榱藟K元素
對于偽元素 :before 和 :after 而言，屬性 content 是必須設置的，我們知道屬性的值可以為字符串，也可以有其它形式，比如指向一張圖片的 URL:
content: url( "img/icon.png" )
配合偽類使用
偽元素 :before 還可以配合偽類使用，這里舉經(jīng)常與 :before 配合使用的偽類 :hover 為例：
.before:hover:before{content:"you before"; color:red;}
me
配合取值函數(shù) attr() 使用
還有一種較為常見的用法，即配合取值函數(shù) attr() 一起使用，如：
a::before{content: attr(title)}
這個達到的效果跟下面一樣：
專業(yè)面向開發(fā)者的中文技術問答社區(qū):after
偽元素 :after 與 偽元素 :before 類型相同，只不過它指定的屬性 content 值為出現(xiàn)在指定元素內容的后面，說明省。
二：偽類和偽元素的區(qū)別 偽類種類 偽元素種類偽類：作用對象是整個元素
例如：
a:link
{color:#111}
a:hover
{color:#222}
div:first-child
{color:#333}
div:nth-child(3)
{color:#444}
盡管這些條件不是基于DOM的，但結果每一個都是作用于一個完整的元素，比如整個鏈接，段落，div等等。
偽元素：作用于元素的一部分
例如：
p::first-line
{color:#555}
p::first-letter
{color:#666}
a::before
{content : "hello
world";}
偽元素作用于元素的一部分：一個段落的第一行 或者 第一個字母。
總結：
偽元素其實相當于偽造了一個元素，例如before,first-letter達到的效果就是偽造了一個元素，然后添加了其相應的效果而已；
而偽類沒有偽造元素，例如first-child只是給子元素添加樣式而已。
偽元素和偽類之所以這么容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 css3 為了區(qū)分兩者，已經(jīng)明確規(guī)定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。
但因為兼容性的問題，所以現(xiàn)在大部分還是統(tǒng)一的單冒號，但是拋開兼容性的問題，我們在書寫時應該盡可能養(yǎng)成好習慣，區(qū)分兩者。
如果您覺得本文對您的學習有所幫助，請多支持與鼓勵。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111122.html
作為一個CSS3初學不久者來說，很容易混淆單冒號（:）和雙冒號（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因為兩者看起來太相像了，就像孿生兄弟。但實際上，他們的區(qū)別還是挺大的，最多算得上近房親戚。 下面我們來開始講講單冒號（:）偽類和雙冒號（::）偽元素有什么相同和不同點（另外在CSS2中單冒號: 也叫做偽對象，具體可看看http://www.mb5u.com/tool/cs...
摘要：偽類和偽元素，對于絕大多數(shù)同學來說，都是耳熟能詳?shù)拿郑_實又有很多人搞不清楚它們之間的區(qū)別，以致于混淆概念。除了上面這個本質區(qū)別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對于絕大多數(shù)同學來說，都是耳熟能詳?shù)拿郑_實又有很多人搞不清楚它們之間...
摘要：偽元素被當做的樣式來進行展現(xiàn)，用法和普通的元素用法是一樣的。中的偽元素使用個冒號，在中，為了區(qū)分偽類和偽元素，規(guī)定偽元素使用個冒號。偽元素的特點優(yōu)點不占用節(jié)點，減少節(jié)點數(shù)。不僅塊級元素可以設置偽元素，大部分行級元素也可以。 1 什么是偽元素？ CSS 在渲染文檔的時候，偽元素可以通過 css 給 HTML 添加一個元素（叫標簽也行），這個元素在文檔樹中是找不到的。偽元素被當做 CSS ...
摘要：選擇器基礎選擇器標簽選擇器針對一類標簽注意選擇的所有，而不是一個。元素元素是文檔結構的基礎。行內元素不會在它本身之前或之后生成分隔符，所以可以出現(xiàn)在另一個元素內容中，而不會破壞其顯示。 css選擇器 基礎選擇器 1.標簽選擇器：針對一類標簽 注意：選擇的所有，而不是一個。 p{ font-size:14px; } css 2.ID選擇器：針對某一個特定的標簽使用，只能使...
摘要：發(fā)現(xiàn)有很多東西效果其實可以用偽類或者偽元素實現(xiàn)。記錄下為什么引入偽類和偽元素引入偽類和偽元素概念是為了格式化文檔樹以外的信息，也就是說。偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者列表中的第一個元素。 最近用js實現(xiàn)一些css效果。發(fā)現(xiàn)有很多東西效果其實可以用偽類或者偽元素實現(xiàn)。特地補充下這方面的知識。 記錄下 為什么引入偽類和偽元素 CSS introd...
閱讀 2306·2021-11-23 10:09
閱讀 2885·2021-10-12 10:11
閱讀 2594·2021-09-29 09:35
閱讀 1336·2019-08-30 15:53
閱讀 2260·2019-08-30 11:15
閱讀 2904·2019-08-29 13:01
閱讀 2290·2019-08-28 18:15
閱讀 3363·2019-08-26 12:13
