Css3屬性選擇器與偽類選擇器

2021-09-19 17:27:50 字數 1026 閱讀 2629

其特點是通過屬性來選擇元素,具體有以下 5 種形式:

e[attr] 表示存在attr 屬性即可;div[class]

e[attr=val] 表示屬性值完全等於val; div[class=mydemo]

e[attr*=val] 表示的屬性值裡包含val 字元並且在 「任意」位置;div[class*=mydemo]

e[attr^=val] 表示的屬性值裡包含val 字元並且在 「開始」位置; div[class^=mydemo]

e[attr=va

l]表示

的屬性值

裡包含v

al字元

並且在「

結束」位

置;di

v[cl

as

s=val] 表示的屬性值裡包含val 字元並且在 「結束」位置; div[class

=val]表

示的屬性

值裡包含

val字

符並且在

「結束」

位置;d

iv[c

lass

=demos]

e:nth-child(n) 第n個子元素,計算方法是e元素的全部兄弟元素;

e:nth-last-child(n) 同e:nth-child(n) 相似,只是倒著計算;

1、以某元素相對於其父元素或兄弟元素的位置來獲取無素的結構偽類。重點理解通過e來確定元素的父元素。

n 遵循線性變化,其取值 0、1、2、3、4、… 但是當 n<=0 時,選取無效。

n可是多種形式:nth-child(2n)、nth-child(2n+1)、 nth-child(-1n+5)等;

e:empty 選中沒有任何子節點的e元素;(使用不是非 常廣泛) 沒有任何的子元素,包括空格。

2、目標偽類

選擇器功能描述

版本e:target

結合錨點進行使用,處於當前錨點的元素會被選中

33、偽元素選擇器

CSS3 選擇器 偽類選擇器

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

Css3選擇器 偽類選擇器

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

css選擇器 偽類選擇器 屬性選擇器

偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...