CSS3屬性選擇器

1.以input標籤示例css3樣式

**：

input

type=

"text" 
name=
"username" 
class=
"username" 
value=
"sybil"
>
type=
"text" 
name=
"middle name"
>
type=
"text" 
name=
"lastname" 
class=
"lastname" 
value=
"lee"
>
type=
"text" 
name=
"chinesename"
>

分析：所有input標籤的背景顏色都變成了藍色，如果想要部分變色，則css3樣式**替換為：

/*

設定所有含有
class
屬性的input
標籤的屬性
*/input[class]

2.表示屬性

/*

所有class
為firstname
的標籤*/
[class='username']

type=

"text" 
name=
"username" 
class=
"username" 
value=
"sybil"
>
type=
"text" 
name=
"middle name"
>
type=
"text" 
name=
"lastname" 
class=
"lastname" 
value=
"lee"
>
type=
"text" 
name=
"chinesename"
>
class=
"username"
>my first css3 test
//新增加了p標籤，class="username"

4.所有name屬性的值以user開頭的input標籤（注意：下面的html**稍有變動，與上面的相比）

/*name

以user
開頭的input
標籤*/
input[name^=user]

type=

"text" 
name=
"username" 
class=
"username" 
value=
"sybil"
>
type=
"text" 
name=
"middlename"
>
type=
"text" 
name=
"lastname" 
class=
"lastname" 
value=
"lee"
>
type=
"text" 
name=
"usercity"
>
class=
"username"
>my first css3 test

5.name屬性以name結束的input標籤：

/*name

屬性的值以
name
結束的input
標籤*/
input[name$=name]

type=

"text" 
name=
"username" 
class=
"username" 
value=
"sybil"
>
type=
"text" 
name=
"middlename"
>
type=
"text" 
name=
"lastname" 
class=
"lastname" 
value=
"lee"
>
type=
"text" 
name=
"usercity"
>
class=
"username"
>my first css3 test

特別說明：^表示以。。。開頭

$表示以。。。。結尾

*表示包含。。。內容

6.在css中，選擇器都是用來選擇元素的。

7.* 的用法：（html**略有變動）

/*input

中含有name
屬性值為
stna的*/
input[name*=stna]

type=

"text" 
name=
"firstname" 
class=
"username" 
value=
"sybil"
>
type=
"text" 
name=
"middlename"
>
type=
"text" 
name=
"lastname" 
class=
"lastname" 
value=
"lee"
>
type=
"text" 
name=
"usercity"
>
class=
"username"
>my first css3 test

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...