很遗憾，这又是一个IE不支持的属性（CSS2.1），请用mozilla查看效果。

http://www.mozilla.org/products/firefox

</p> <style> <p>h1[title] { color: blue; }</p> <p>h1[title~=guoshuang] { color: green; }</p> <p>h1[title|=guoshuang] { color: yellow; }</p> <p>h1[title=guoshuang] { color: red; }</p> <p>h1[title=guoshuang][class=myheading] { color: red;font-size:10px; }</p> </style> <h1>标题1</h1> <h1 title="测试">标题1</h1> <h1 title="i am guoshuang">标题1</h1> <h1 title="guoshuang-david is me">标题1</h1> <h1 title="guoshuang">标题1</h1> <h1 title="guoshuang" class="myheading">标题1</h1> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

5.8 Attribute selectors

CSS 2.1 allows authors to specify rules that match elements which have certain attributes defined in the source document.

5.8.1 Matching attributes and attribute values

Attribute selectors may match in four ways:

[att]

Match when the element sets the “att” attribute, whatever the value of the attribute.

[att=val]

Match when the element’s “att” attribute value is exactly “val”.

[att~=val]

Match when the element’s “att” attribute value is a space-separated list of “words”, one of which is exactly “val”. If this selector is used, the words in the value must not contain spaces (since they are separated by spaces).

[att|=val]

Match when the element’s “att” attribute value is a hyphen-separated list of “words”, beginning with “val”. The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the “lang” attribute in HTML) as described in RFC 3066 ([RFC3066]).

Attribute values must be identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language.

Example(s):

For example, the following attribute selector matches all H1 elements that specify the “title” attribute, whatever its value:

h1[title] { color: blue; }

Example(s):

In the following example, the selector matches all SPAN elements whose “class” attribute has exactly the value “example”:

span[class=example] { color: blue; }

Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute.

Example(s):

Here, the selector matches all SPAN elements whose “hello” attribute has exactly the value “Cleveland” and whose “goodbye” attribute has exactly the value “Columbus”:

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Example(s):

The following selectors illustrate the differences between “=” and “~=”. The first selector will match, for example, the value “copyright copyleft copyeditor” for the “rel” attribute. The second selector will only match when the “href” attribute has the value “http: //www.w3.org/”.

a[rel~="copyright"]

a[href="http: //www.w3.org/"]

Example(s):

The following rule hides all elements for which the value of the “lang” attribute is “fr” (i.e., the language is French).

*[lang=fr] { display : none }

Example(s):

The following rule will match for values of the “lang” attribute that begin with “en”, including “en”, “en-US”, and “en-cockney”:

*[lang|="en"] { color : red }

Example(s):

Similarly, the following aural style sheet rules allow a script to be read aloud in different voices for each role:

DIALOGUE[character=romeo]

{ voice-family: “Laurence Olivier”, charles, male }

DIALOGUE[character=juliet]

{ voice-family: “Vivien Leigh”, victoria, female }

原文在：

http://www.w3.org/TR/CSS21/selector.html#attribute-selectors