
升級為 CSS3
|
217
屬性選擇器
在第二章,我們已經學習如何在元素中加入屬性。你可以使用 CSS 選擇器來根據這些屬
性選擇元素,甚至也可以使用這些屬性的值。CSS 2 提供一些非常實用的屬性選擇器。
CSS3 又加入一些,可根據屬性值的子字串來選擇。
CSS 2 屬性選擇器,包括選擇具有特定屬性(無論它的值為何)的元素、擁有特定值的
屬性、屬性值含有特定的、以空格分隔的字,及語言屬性。
請注意我們重複使用“特定”的字眼。透過 CSS,你可以透過屬性非常準確地選擇特定
元素。
為了介紹 CSS 2.1 屬性選擇器,我們將使用表 7-4 所述的四種屬性選擇器來選擇下列兩
行的 HTML:
<ul>
<li><a href="http://x.com/selectors.pdf" hreflang="en-us" rel="nofollow"
title="CSS selectors and browser support">Specifishity</a></li>
<li>
<input type="checkbox" name="spec" id="spec" value="web workers rock"/>
<label for="spec">Are web workers in the specifications?</label>
</li>
</ul>
表 7-4 CSS 2 屬性選擇器可以使用屬性、屬性值、語言屬性,以及在屬性值裡面以空格分隔
的字來匹配
選擇器 範例 說明