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