《精彩絕倫的CSS》 選擇器(一)偽類與偽元素

2021-07-30 14:57:30 字數 997 閱讀 9715

一、偽類與偽元素

eg:h1:

hover

<h1>

媚媚你好!

h1>

h1::first-letter
<h1>

媚媚你好!

h1>

下面列出主要的偽類和偽元素
1、偽類(pseudo-class):

:link - 未訪問過的鏈結;

:visited - 訪問過的鏈結;

:hover - 滑鼠懸停的元素;

:focus - 獲取焦點的元素;

:active - 啟用的元素(例如乙個被單擊的鏈結元素);

:first-child - 某一元素裡的第乙個子元素;

:lang() - 根據元素的lang屬性確定的元素;

css3新增如下偽類,截止2023年,他們還未被廣泛支援:

:target

:root

:nth-child()

:nth-of-type()

:nth-last-of-type()

:first-of-type

:last-of-type

:only-of-type 

:only-child

:last-child

:empty

:not()

:enabled

:disabled

:checked

2、偽元素(pseudo-element)

::first-link

::first-letter

::before

::after

《精彩絕倫的CSS》 提示(一)屬性值排序

一 屬性值排序 大多數允許使用多個關鍵字的css屬性都允許以任何順序書寫關鍵字,但是一些屬性要求以特定順序進行書寫,比如下面這幾個 1 調整字型值的順序 font 在定義字型屬性時必須同時包含字型大小 font size 和字型族 font family 並且按照既定的順序進行書寫,如果順序顛倒或者...

CSS偽類選擇器

原來學習過css偽類選擇器,前幾天寫css發現自己並不熟悉了。這兩天把它撿起來複習一下 css偽類選擇器是用於向某些元素新增特定的效果。錨偽類 包括四種狀態,活動狀態,未被訪問狀態,已被訪問狀態,懸停效果。example a link a visited a hover a active fist ...

css偽類選擇器

link 設定超連結的預設樣式 例如 a a link 不推薦使用 有相容性 one link 不推薦使用 有相容性 visited 設定標籤被訪問過後的樣式 例如 a visited 注意 該偽類選擇器一般不會大量使用,因為瀏覽器存在快取問題。只能設定與顏色相關的屬性 hover 設定滑鼠懸停到標...