具有特定屬性的HTML元素樣式

具有特定屬性的HTML元素樣式不僅僅是class和id。

注意：IE7和IE8需宣告!DOCTYPE才支援屬性選擇器！IE6和更低的版本不支援屬性選擇器。

屬性選擇器

下面的例子是把包含標題（title）的所有元素變為藍色：

例項

[title]
{
    color:blue;
}

屬性和值選擇器

下面的例項改變了標題title='runoob'元素的邊框樣式:

例項

[title=runoob]
{
    border:5px solid green;
}

屬性和值的選擇器 - 多值

下面是包含指定值的title屬性的元素樣式的例子，使用（~）分隔屬性和值:

例項

[title~=hello] { color:blue; }

下面是包含指定值的lang屬性的元素樣式的例子，使用（|）分隔屬性和值:

例項

[lang|=en] { color:blue; }

表單樣式

屬性選擇器樣式無需使用class或id的形式:

例項

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

CSS 屬性選擇器 *=, |=, ^=, $=, *= 的區別

先上總結:

"value 是完整單詞"型別的比較符號:~=,|=

"拼接字串" 型別的比較符號:*=,^=,$=

1.attribute 屬性中包含 value:　

[attribute~=value] 屬性中包含獨立的單詞為 value，例如：

比賽前瞻

[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 屬性中做字串拆分，只要能拆出來 value 這個詞就行，例如：

[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

2.attribute 屬性以 value 開頭:

[attribute|=value] 屬性中必須是完整且唯一的單詞，或者以-分隔開：，例如：

[lang|=en]     -->  <p lang="en">  <p lang="en-us">

[

attribute^=value] 屬性的前幾個字母是 value 就可以，例如：

[lang^=en]    -->  <p lang="ennn">

3.attribute 屬性以 value 結尾:

[attribute$=value] 屬性的後幾個字母是 value 就可以，例如：

a[src$=".pdf"]