CSS 偽元素與偽類

2022-09-04 12:00:15 字數 882 閱讀 5792

向未訪問的鏈結新增特殊的樣式。也就是說,鏈結所指的 uri 尚未出現在使用者**的歷史中。這種狀態與 :visited狀態是互斥的。

對已訪問的鏈結新增樣式。

對滑鼠懸停時的鏈結應用樣式

對滑鼠聚焦的鏈結應用樣式

向啟用(在滑鼠點選與釋放之間發生的事件)的元素新增特殊的樣式。

對於上述偽類,要遵循順序書寫!!

從父元素匹配索引為n的子元素,設定樣式,n從1開始 nth-child(1)與first-child相同

p1

p2span1

span2

div p:nth-child(1)時 為第乙個p元素應用樣式

div span:nth-child(1)時 匹配不到任何元素,以為span為div的第三個子元素

從父元素匹配第n個指定元素的子元素  nth-of-type(1)與first-of-type相同

div p:nth-of-type(1)時 為p1應用樣式

div span:nth-of-type(1)時 為span1應用樣式

在涉及的uri被使用的時候,把樣式應用到指定元素上。

選擇沒有子元素(包括文字節點)的元素。

選擇文件樹中的第乙個元素 在html中 root永遠指定html元素,主要是為了提高權重。

e:not(f){},選擇父元素e中除了f的所有元素 應用樣式。

選擇被選中的元素應用樣式,多用於表單的單選,核取方塊。

選擇禁止輸入/允許輸入的元素應用樣式,多用於input中

設定首字母樣式

設定第一行樣式

e::before

對e元素之前新增乙個行內元素,其內容為content中的內容,可自行設定樣式

與::before相反

css 偽類 與 偽元素

偽類就是一種虛構的狀態或者說是一種具有特殊屬性的元素,可以使用 css 進行樣式修飾。偽類前面通常加乙個 之後跟上偽類的名字或括號裡面的值。常用的偽類 link visited hove active focus first child nth child 偽元素更像是虛擬的元素可以和 html 元...

css 偽類與偽元素

屬性 描述 link 向未被訪問的鏈結新增樣式。visited 向已被訪問的鏈結新增樣式。hover 當滑鼠懸浮在元素上方時,向元素新增樣式。active 向被啟用的元素新增樣式。focus 向擁有鍵盤輸入焦點的元素新增樣式。first child 向元素的第乙個子元素新增樣式 lang 向帶有指定...

CSS 偽類與偽元素

根據用途分類的偽類總結圖和根據冒號分類的偽元素總結圖 偽類與偽元素 css引入偽類和偽元素概念是為了格式化文件樹以外的資訊 偽類用於當已有元素處於的某個狀態時,為其新增對應的樣式,這個狀態是根據使用者行為而動態變化的。偽元素用於建立一些不在文件樹中的元素,並為其新增樣式。區別 偽類的操作物件是文件樹...