day66 CSS偽類選擇器和偽元素選擇器

2022-08-24 10:00:09 字數 1130 閱讀 5719

1. 偽類選擇器:hover 和 focus 比較常用。

1.1 hover:把滑鼠移動到內容邁騰2020款tsi dsg舒適型的時候,字型變成了紅色。

html:

邁騰2020款tsi dsg舒適型

css: p:hover注意p和hover中間用冒號:分開。p代表所有p標籤。

1.2 focus:點選文字輸入框,背景顏色變成黃色。

html:

css: input:focusoutline指外框, 注意p和hover中間用冒號:分開。

1.3 active: 點選文字輸入框,背景閃現黃色。如果滑鼠左鍵按住輸入框內部不放,背景一直都是黃色,放開之後黃色消失。

html:

css: input:active同樣適合用於文字:點選文字,閃現黃色,按住不放是黃色,放開之後黃色消失。

html:

邁騰2020款tsi dsg舒適型

css: p:active1.4 link:瀏覽器剛開啟的時候,沒訪問過的鏈結,把baidu的字型顏色設定為綠色,接下來如果訪問這個鏈結之後,baidu的字型顏色會恢復到原來的紫色。注意id不能是純數字。

css: #d1:link1.5 visited: 瀏覽器剛開啟的時候,沒訪問過的鏈結,baidu的字型顏色預設是藍色,接下來如果訪問這個鏈結之後,baidu的字型顏色會變成紅色。

css: #d1:visited2. 偽元素選擇器

2.1 first-letter :常用的給首字母設定特殊樣式

html:

邁騰2020款tsi dsg舒適型

css: p:first-letter首字母38畫素,紅色。

2.2 before :在每個標籤的內容之前插入*

html:

邁騰2020款tsi dsg舒適型

邁騰2020款tsi dsg舒適型

css: p:before2.3 after :在每個標籤的內容後面插入[?]

html:

邁騰2020款tsi dsg舒適型

邁騰2020款tsi dsg舒適型

css: p:after

CSS偽類選擇器(結構偽類)

結構選擇器 獲去當前元素的第乙個子元素 li first child 結構選擇器 獲去當前元素的最後乙個子元素 li last child 結構選擇器 選擇某個元素的乙個或者多個特定的子元素 li nth child 3 結構選擇器 選擇某個元素的乙個或者多個特定的子元素 從這個元素的最後乙個子元素...

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 設定滑鼠懸停到標...