偽類選擇器

2021-09-20 04:20:19 字數 1339 閱讀 6954

css3

css3 是css2 的「進化」版本, 在css2 基礎上,增強或新增了許多特性,彌補了css2 的眾多不足之處,使得 web 開發變得更為高效和便捷.

權重css 權重指的是樣式的優先順序,有兩條或多條樣式作用於乙個元素,權重高的那條樣式對元素起作用,權重相同的,後寫的樣式會覆蓋前面寫的樣式。

權重的等級

1、!important,加在樣式屬性值後,權重值為 10000

2、內聯樣式,如:style=」」,權重值為 1000

3、id 選擇器,如:#content,權重值為 100

4、類,偽類和屬性選擇器,如: content、:hover 權重值為 10

5、標籤選擇器和偽元素選擇器,如:div、p、:before 權重值為 1

6、通用選擇器(*)、子選擇器(>)、相鄰選擇器(+)、同胞選擇器(~)、 權重值為 0

屬性選擇器

div[class] 所有div中帶有class的

div[class=div1] 所有div中class=div1的

div[class*=d] 屬性class的值中包含d的

div[id^=i] 屬性id值以i開始的(以…開頭)

div[id$=i] 屬性id的值以i結束的(以…結束)

偽類選擇器

1.first-child:選擇第乙個子元素

2.last-child:選擇最後乙個子元素

3.偶數:(1)nth-child(2n) (2)nth-child(even)

4.奇數:(1)nth-child(2n+/-1) (2)nth-child(odd)

5.nth-child(-1n+5):選中前五個

nth-last-child(-1n+2):選中後兩個

6.first-line第一行

7.first-letter首字

文字陰影

1.text-shadow

text-shadow:10px(水平偏移量) 20px(垂直的偏移量) 10px(模糊程度) red(陰影的顏色)

2.多個陰影顯示:

text-shadow:10px 20px 10px red,10px 20px 10px red;

13.內陰影:

text-shadow:inset 10px 20px 10px  red;1邊框

1.邊框圓角

border-radius

border-radius: 100px(左上) 100px(右上) 0px(左下) 0px(右下);

border-radius: 100px(左上) 100px (右上,左下) 0px(右下);

2.邊框陰影

box-shadow

屬性選擇器,偽類選擇器,偽元素選擇器

屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...

偽類選擇器

作用根據連線的不同狀態可以以不同的方式顯示 偽類是css 用於向某些選擇器新增特殊的效果。a標籤中有四個 link visited hover active 用法示例 a link 未訪問的連線 顏色可以自定義 a visited 已訪問的連線 hover 滑鼠移動到連線上時顯示的效果 a acti...

偽類選擇器

偽類選擇器 用來設定 某些元素在特殊情況下的屬性 例如 超連結在訪問之後的樣式,文字框獲得輸入焦點後的樣式,文字被選中後的樣式。等 1 visited 這個偽類選擇器用於 超連結。指的是 訪問之後的超連結的樣式。只能修改顏色。3 link 普通超連結的樣式 可以設定顏色 背景顏色。等等 4.hove...