針對元素的 屬性，符合指定的條件時，設計特別的風格。
IE6 無此項；IE8, Firefox3.0, Safari, Chrome 都成功。
當元素有設定屬性 att 時，會採用此設計的風格。
- 風格用法：
<style type='text/css'>
I[title] { color:red }
</style>
孔子說：<i>有朋自遠方來，不亦樂乎！</i><br />
孔子說：<i title='論語'>有朋自遠方來，不亦樂乎！</i> - 執行結果：
孔子說：有朋自遠方來，不亦樂乎！
孔子說：有朋自遠方來，不亦樂乎！
- 例中第二句用了 TITLE 屬性，所以採用了設計的風格，用紅色。
元素有設定屬性 att，而且其值等於 val，會採用此設計的風格。
- 風格用法：
<style type='text/css'>
I[lang='en'] {background:blue}
I[lang='zh'] {background:green;
font-size:140%;
}
</style>
<i lang='en'>Happy New Year!</i><br />
<i lang='zh'>新年快樂！</i> - 執行結果：
Happy New Year!
新年快樂！
元素有設定屬性 att，其中存有一串字詞（words），字詞間用空白分開。此串字詞中含有，完全符合 val 的字詞，則會採用此設計的風格。
- 風格用法：
<style type='text/css'>
.cls1[title~="論語"] { color:red }
</style>
<tt class='cls1' title='儒家 至聖'>孔子說：有朋自遠方來，不亦樂乎！</tt><br />
<tt class='cls1' title='論語 儒家'>孔子說：有朋自遠方來，不亦樂乎！</tt> - 執行結果：
孔子說：有朋自遠方來，不亦樂乎！
孔子說：有朋自遠方來，不亦樂乎！
- 例中第二句的 TITLE 屬性，其字串含有”儒家”，所以採用了設計的風格，用紅色。
元素有設定屬性 att，其中存有一串字詞（words），字詞間用空白分開，每個字詞用 - 分為字首與字尾。此串字詞中含有，以 val 為首的字詞，則會採用此設計的風格。
- 風格用法：
<style type='text/css'>
.cls2[title|="a"] { color:red }
</style>
<tt class='cls2' title='b-1 b-2'>孔子說：有朋自遠方來，不亦樂乎！</tt><br />
<tt class='cls2' title='a-1 b-2'>孔子說：有朋自遠方來，不亦樂乎！</tt> - 執行結果：
孔子說：有朋自遠方來，不亦樂乎！
孔子說：有朋自遠方來，不亦樂乎！
- 例中第二句的 TITLE 屬性，其字串含有”a”為首的字詞，所以採用了設計的風格，用紅色。
元素有設定屬性 att 存有一字串，此字串以 val 為首，則會採用此設計的風格。
- 風格用法：
<style type='text/css'>
.lnk [href^="mailto"]
{background:white;
color:red;
font-size:140%;
}
</style>
<div class=lnk>
<a href='http://google.com'>搜尋</a>
<p><a href='mailto:a@b.c'>歡迎來信</a>
</div> - 執行結果：
元素有設定屬性 att 存有一字串，此字串以 val 為尾，則會採用此設計的風格。
- 風格用法：
<style type='text/css'>
.game [title$="ot"]
{background:blue;}
</style>
<div class=game>
<span title='net'>網路遊戲</span>
<span title='shoot'>射擊遊戲</span>
<span title='iq'>益智遊戲</span>
</div> - 執行結果：
網路遊戲 射擊遊戲 益智遊戲
元素有設定屬性 att 存有一字串，此字串含有 val 子字串至少一次，則會採用此設計的風格。
- 風格用法：
<style type='text/css'>
.wrd [title*="to"]
{background:blue;}
</style>
<div class=wrd>
<span title='car'>汽車</span>
<span title='train'>火車</span>
<span title='autobike'>機車</span>
</div> - 執行結果：
汽車 火車 機車
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type="text/css">
.hvr I {border:solid 1px red;
color:white;
}
.hvr:hover [onclick]
{background:red;}
.hvr:active [title~=game]
{background:blue;}
</style>
<div class=hvr>
<i title='pc game'>好玩遊戲</i>
<i title='chess'>象棋</i>
<i title='math game'>數獨</i>
<i title='sport' onclick='alert("ok")'>足球</i>
</div> - 執行結果：
好玩遊戲 象棋 數獨 足球
