|
1. 屬性選擇器
屬性選擇器(Attribute selector)讓你可以基于屬性來定位一個元素。你可以只指定該元素的某個屬性，這樣所有使用該屬性——而不管它的值——的這個元素都將被定位，也可以更加明確并定位在這些屬性上使用特定值的元素 —— 這就是屬性選擇器展示它們的威力的地方。
有6個不同類型的屬性選擇器：
- [att=value]
該屬性有指定的確切的值。
- [att~=value]
該屬性的值必須是一系列用空格隔開的多個值，(比如，class=”title featured home”)，而且這些值中的一個必須是指定的值”value”。
- [att|=value]
屬性的值就是“value”或者以“value”開始并立即跟上一個“-”字符，也就是“value-”。(比如lang=”zh-cn”)
- [att^=value]
該屬性的值以指定值開始。
- [att$=value]
該屬性的值包含指定的值(而無論其位置)。
- [att*=value]
該屬性的值以指定的值結束
比如，如果你想要改變你的博客上的日志部分元素的背景顏色，你可以使用一個指定每一個class屬性值以“post-”開始的div的屬性選擇器：
div[class|="post"] {
background-color: #333;
}
該語句將匹配所有class屬性包含”post”并帶”-”字符的div元素。(注：此處英文原文有些上下文不對應，我已經更正——譯者，神飛)
屬性選擇器的另一個很有用的用處是定位不同類型的input元素。比如，如果你想讓你的文本輸入框使用一個特定的寬度，你可以使用下面的屬性選擇器：
input[type="text"] {
width: 200px;
}
這將匹配所有type屬性值等于“text”的input元素。
現(xiàn)在我們可能像為網站上不同的文件類型的鏈接添加不同的圖標，這樣你的網站的訪客就會知道他們將獲得一個圖片、或者PDF文件、或者是一個word文檔等。這就可以使用屬性選擇器來實現(xiàn)：
a[href*=".jpg"] {
background: url(jpeg.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}
a[href*=".pdf"] {
background: url(pdf.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}
a[href*=".doc"] {
background: url(word.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}
在此例中，我們使用了一個定位所有的鏈接(a)的href屬性分別以.jpg,.pdf或.doc結束(*)的屬性選擇器。詳細可查看前端觀察之前的一篇文章《使用CSS選擇器創(chuàng)建個性化鏈接樣式》
瀏覽器支持
除了Internet Explorer 6，所有的主流瀏覽器都支持屬性選擇器。這意味著，如果你在你的網站上使用了屬性選擇器，你應該確保IE6用戶將仍能獲得一個可用的網站。比如我們的第三個例子，為鏈接添加圖標可以給你的網站帶來另一個級別的可用性，但是如果這些鏈接不顯示任何圖標，該網站仍然還是可用的。
出處：前端觀察
責任編輯：bluehearts
上一頁 征服高級CSS選擇器 [1] 下一頁 征服高級CSS選擇器 [3]
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 征服高級CSS選擇器 [2]
