CSS3屬性選擇器

<div id="section1"> 示例文本1</div>

<div id="subsection1-1">示例文本1-1</div>

<div id="subsection1-2">示例文本1-2</div>

<div id="section2">示例文本2</div>

<div id="subsection2-1">示例文本2-1</div>

<div id="subsection2-2">示例文本2-2</div>

CSS2中使用屬性選擇器來設置

<style type=text/css>

[id = section1]{

     background:yellow;

}

</style>

CSS3中的屬性選擇器

1.[att*=val]屬性值包含用val指定的字符

[id*=section]{

    background:yellow;

}

則頁面中id爲"section1"、"subsection1-1"、"subsection1-2"的div元素的背景色都變爲黃色，由於這些元素的id屬性中都包含"section"字符。

2.[att^=val]屬性值的開頭字符爲用val指定的字符，則該元素使用這個樣式

[id^=val]{

   background:yellow;

}

頁面中id爲"section1"、"section2"的div元素的背景色都變爲黃色，由於這些元素的id屬性的開頭字符都爲"section"。

3.[att$=val]結尾字符爲用val指定的字符

[id$=\-1]{

   background:yellow;

}

頁面中爲"subsection1-1"、"subsection2-1"的div元素的背景色變爲黃色，由於其以"-1"結尾。

注意：要在指定的匹配字符前必須加上"\"這個escape字符。