CSS是用來布局和格式化網(wǎng)頁和其他媒體的語言。它是 Web 的三種主要語言之一，與HTML(用于結(jié)構(gòu))和JavaScript(用于行為)并列。每一年，我們都看到CSS的規(guī)模在增長，2022年也不例外。

今天，我們來看一上，2022 最受歡迎的 CSS 偽類、偽元素分別是什么。

2022最受歡迎的偽類占比

用戶動作偽類 :hover, :focus, 和 :active 再次位列前三。否定偽類 :not()以及 :root 也繼續(xù)流行，可能用于創(chuàng)建自定義屬性。

去年，人們注意到 :focus-visible，一種以更符合用戶期望的方式來設(shè)計(jì)焦點(diǎn)元素的方式，出現(xiàn)在不到1%的頁面中。自2022年3月以來，該屬性在所有三個(gè)主要引擎中都可用，現(xiàn)在在10%的桌面頁面和9%的移動頁面中都能找到。

我們過濾掉任何帶有前綴的(因此是特定于瀏覽器的)偽元素。它們通常用于選擇瀏覽器的界面組件或元素，我們對開發(fā)人員實(shí)際使用的偽元素感興趣。

自去年以來，::before和::after的使用有所增加。這些都是用來在文檔中插入生成的內(nèi)容。通過檢查content屬性的使用情況，我們可以看到它最常被用來插入一個(gè)空字符串，用于樣式設(shè)計(jì)。

生成的內(nèi)容是在不需要添加元素的情況下對網(wǎng)格區(qū)域進(jìn)行樣式設(shè)計(jì)的一種方法；也許這也是這些屬性使用量增加的原因？

現(xiàn)在::marker偽元素的使用率已經(jīng)達(dá)到了1%，這表明人們正在慢慢開始利用選擇和樣式列表標(biāo)記的能力。

屬性選擇器

最流行的屬性選擇器是 type，占 54%。接下來最流行的屬性選擇器是占37%的class，25%的 disabled，以及17%的 dir。