8 1 3 CSS3選擇器 偽類

2022-05-16 10:00:46 字數 1083 閱讀 4182

1. e:target 表示當前的url片段的元素型別,這個元素必須是e(也就是選取當前活動的目標元素)

**:這裡活動元素變成了金色

<

head

>

<

style

>

divdiv:target

style

>

head

>

<

body

>

<

a href

="#div1"

>div1

a>

<

a href

="#div2"

>div2

a>

<

a href

="#div3"

>div3

a>

<

div

id="div1"

>div1

div>

<

div

id="div2"

>div2

div>

<

div

id="div3"

>div3

div>

body

>

2.1 e:disabled 表示不可點選的表單控制項

2.2 e:enabled 表示可點選的表單控制項

3. e:checked 表示已選中的checkbox或radio

4.1 e:first-line 表示e元素中的第一行

4.2 e:first-letter 表示e元素中的第乙個字元

5. e::selection 表示e元素在使用者選中文字時

6.1 e::before 生成內容在e元素前

6.2 e::after 生成內容在e元素後

例:p:after

7. e:not(s) 表示e元素不被匹配

8. e~f表示e元素毗鄰的f元素(選擇的是後面的元素)

例:p~h1  // 這裡選擇的是p後面的相鄰的h1

9. content 屬性(一般配合e::before和e::after)

CSS3 選擇器 偽類選擇器

e pseudo class e.class pseudo class 語法1示例 a link 語法2示例 a selected hover 動態偽類,因為這些偽類並不存在於html中,而只有當使用者和 互動的時候才能體現出來,動態偽類包含兩種。第一種是我們在鏈結中常看到的錨點偽類,如 link ...

CSS選擇器(3) 動態偽類選擇器

偽類選擇器對於大家來說最熟悉的莫過於link visited hover active,這是平時常用到的偽類選擇器。而css3的偽類選擇器可以分為6種 動態偽類選擇器 目標偽類選擇器 語言偽類選擇器 ui狀態偽類選擇器 結構偽類選擇器和否定偽類選擇器。鏈結偽類選擇器 e link 選擇匹配的e元素,...

Css3選擇器 偽類選擇器

一 動態偽類 動態偽類,因為這些偽類並不存在於html中,而只有當使用者和 互動的時候才能體現出來,動態偽類包含兩種,第一種是我們在鏈結中常看到的錨點偽類,如 link visited 另外一種被稱作使用者行為偽類,如 hover active 和 focus 對於 hover在ie6下只有a元素支...