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