CSS3的屬性選擇器

2022-07-26 17:33:10 字數 1948 閱讀 4794

css3中新增了許多選擇器,今天零度給大家說說css3的屬性選擇器。

與css2相比,css3新增了3種屬性選擇器:[attr^=value]、[attr$=value]、[attr*=value];分別來講解一下。

大家如果接觸過正規表示式的話,應該知道^符號的意思,是表示開頭,沒錯,這裡也是表示開頭的意思,意思就是選擇屬性名attr的開頭值為value的元素!

舉個例子:

<

style

type

="text/css"

>

[class^=tea]

/*此選擇器表示選擇class開頭字串為tea的元素

*/style

>

<

div

class

="teacher"

>我的class是teacher

div>

<

div

class

="tea"

>我的class是tea

div>

<

div

class

="teach"

>我的class是teach

div>

<

div

class

="aaa"

>我的class是aaa

div>

這樣會選擇前三個元素,而不會選擇最後乙個元素。

相比較前乙個,這乙個就很容易理解了,$符號就代表結尾,這裡意思是選擇屬性名attr的結尾值為value的元素!

例子:

<

style

type

="text/css"

>

[class$=er]

/*此選擇器表示選擇class結尾字串為er的元素

*/style

>

<

div

class

="teacher"

>我的class是teacher

div>

<

div

class

="tea"

>我的class是tea

div>

<

div

class

="teach"

>我的class是teach

div>

<

div

class

="aaa"

>我的class是aaa

div>

這樣就會選擇class為teacher的div。

最後這乙個和前面兩個的區別是符號換成了*,這個代表萬用字元的意思,意思是選擇屬性名attr的值包含value的元素!

<

style

type

="text/css"

>

[class$=ch]

/*此選擇器表示選擇class包含字串為ch的元素

*/style

>

<

div

class

="teacher"

>我的class是teacher

div>

<

div

class

="tea"

>我的class是tea

div>

<

div

class

="teach"

>我的class是teach

div>

<

div

class

="aaa"

>我的class是aaa

div>

這樣就會選擇class為teacher和class為teach的兩個div。

這三種屬性選擇器大家如果用的熟練的話會對提高工作效率有很大幫助。

CSS3選擇器 屬性選擇器

指定屬性名,但沒有確定任何屬性值 type text css div div title style div1div title name div2div title age div3div body 指定屬性名,並指定了該屬性的屬性值 其他 與上述相同 div title name 指定屬性名,具...

CSS3 選擇器 屬性選擇器

屬性選擇器早在css2中就被引入了,其主要作用就是對帶有指定屬性的html 元素設定樣式。使用css3屬性選擇器,你可以只指定元素的某個屬性,或者你還可以同時指定元素的某個屬性和其對應的屬性值。選擇有某個屬性的元素,而不管這個屬性的值是什麼。選擇有某個屬性的元素,並且要求這個元素的屬性的屬性值只能為...

Css3選擇器 屬性選擇器

一 e attr e attr 屬性選擇器是css3屬性選擇器中最簡單的一種。如果你希望選擇有某個屬性的元素,而不論這個屬性值是什麼,你就可以使用這個屬性選擇器 ie6不支援這個選擇器。二 attr value e attr value 選擇器和e attr 選擇器,從字面上就能很清楚的理解出來,e...