偽類與偽元素是怎么回事兒

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> 元素的初代子元素

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元素

符號區(qū)別

偽類使用單冒號 : ，偽元素開頭為雙冒號 :: ，單需要注意的是 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 代碼中的語義，既完成了顯示效果，又不會(huì)讓 DOM 中出現(xiàn)很多無語義的空元素

原文鏈接：https://github.com/Advanced-Frontend/Daily-Interview-Question