偽類與偽元素是怎么回事兒
本文轉(zhuǎn)載自微信公眾號(hào)「三分鐘學(xué)前端」，作者sisterAn。轉(zhuǎn)載本文請(qǐng)聯(lián)系三分鐘學(xué)前端公眾號(hào)。
CSS 選擇器
想要了解偽類與偽元素，我們不得不提到 CSS 選擇器，CSS 選擇器是元素和其他部分組合起來，告訴瀏覽器哪個(gè) HTML 元素應(yīng)當(dāng)是被選為應(yīng)用規(guī)則中的 CSS 屬性值的方式
選擇器的種類有：
- 類型、類和ID選擇器
- 標(biāo)簽屬性選擇器
- 運(yùn)算符
- 偽類與偽元素
類型、類和ID選擇器
- h1 { } /* 類型選擇器 */
- .box { } /* 類選擇器 */
- #unique { } /* ID選擇器 */
標(biāo)簽屬性選擇器
這組選擇器根據(jù)一個(gè)元素上的某個(gè)標(biāo)簽屬性是否存在來選擇：
- a[title] { }
或者根據(jù)標(biāo)簽屬性是否是特定值來選擇：
- a[href="https://example.com"] { }
運(yùn)算符
這種選擇器可以將其他選擇器組合起來，更復(fù)雜的選擇元素。下面的示例就是利用運(yùn)算符(>)選擇了 元素的初代子元素
- article > p { }
偽類與偽元素
最后一組就是偽類與偽元素，這一類選擇器的數(shù)量眾多，通常用于很明確的目的
偽類與偽元素
什么是偽類?什么是偽元素?
- 偽類：用于選擇處于 特定狀態(tài) 的元素，比如鼠標(biāo)懸浮狀態(tài)( :hover )。它們表現(xiàn)得會(huì)像是你向你的文檔的某個(gè)部分應(yīng)用了一個(gè)類一樣，幫你在你的標(biāo)記文本中減少多余的類，讓你的代碼更靈活、更易于維護(hù)。
- 偽元素：以類似方式表現(xiàn)，不過表現(xiàn)得是像你往標(biāo)記文本中加入全新的HTML元素一樣，產(chǎn)生的效果是把不存在的元素硬選出來
偽類與偽元素的區(qū)別
表現(xiàn)方式區(qū)別：
偽類表現(xiàn)的是某種狀態(tài)被選擇出來，例如 :hover 、 :checked ，而偽元素表現(xiàn)的是選擇元素的某個(gè)部分，使這部分看起來像一個(gè)獨(dú)立的元素，其實(shí)并不是，例如 ::before 、 ::after
抽象的說，偽類就是選擇元素某狀態(tài)，偽元素就是創(chuàng)建一個(gè)HTML元素
符號(hào)區(qū)別
偽類使用單冒號(hào) : ，偽元素開頭為雙冒號(hào) :: ，單需要注意的是 CSS3 之前并沒有定義偽元素，都統(tǒng)稱為偽類，所以目前絕大多數(shù)的瀏覽器都同時(shí)支持使用這兩種方式來表示偽元素
常見的偽類與偽元素
偽類：
偽元素：
::before 與 ::after
接下來我們說說最常用、最經(jīng)典的 ::before 和 ::after 偽元素， ::before 表示在元素內(nèi)容之前插入一個(gè)虛擬的元素， ::after 則表示在元素內(nèi)容之后插入，并且 ::before 和 ::after 中支持所有的 CSS 屬性。
但需要注意的是這兩個(gè)偽元素所在的 CSS 規(guī)則必須指定 content 屬性才會(huì)生效
content 屬性
content 可取string、attr()、url()/uri()：
string
- <p>三分鐘學(xué)前端</p>
- <style>
- p::before{
- content: "❤️";
- color: red;
- }
- p::after{
- content: "❤️";
- color: red;
- }
- </style>
attr()
- <a href="https://github.com/Advanced-Frontend/Daily-Interview-Question">❤️三分鐘學(xué)前端❤️</a>
- <style>
- a::after {
- content: ' → ' attr(href); /* 在 href 前顯示一個(gè)箭頭 */
- }
- </style>
url()/uri()
- <p>❤️三分鐘學(xué)前端❤️</p>
- <style>
- p::after {
- content: url("http://resource.muyiy.cn/image/20210729234502.jpeg");
- }
- </style>
這兩個(gè)偽元素常用于一些修飾性元素，以純 CSS 代碼添加進(jìn)去，就能很好地保持 HTML 代碼中的語(yǔ)義，既完成了顯示效果，又不會(huì)讓 DOM 中出現(xiàn)很多無語(yǔ)義的空元素
原文鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question
