CSS基礎學習七：屬性選擇器 · Web前端HTML+CSS+JS初級入門

CSS語法中，對帶有指定屬性的 HTML 元素設置樣式。可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限于?class 和 id 屬性。(注釋：Internet Explorer 7 （以及更高版本）在規定了 !DOCTYPE 的情況下支持屬性選擇器。 IE6 及更低的版本不支持屬性選擇器。) CSS2引入了屬性選擇器。屬性選擇器可以根據元素的屬性及屬性值來選擇元素。 ### 一,簡單屬性選擇器如果希望選擇有某個屬性的元素，而不論屬性值是什么，可以使用簡單屬性選擇器。 (1)先來一個簡單的例子：為帶有 title 屬性的所有元素設置樣式。 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> [title] { color:red; } </style> </head> <body> <h1>可以應用樣式：</h1> <h2 title="Hello world">Hello world</h2> <a title="phpStudy" href="http://phpStudy.net">phpStudy</a> <hr /> <h1>無法應用樣式：</h1> <h2>Hello world</h2> <a href="http://phpStudy.net">phpStudy</a> </body> </html> ~~~ 瀏覽器運行的結果為： ![](https://box.kancloud.cn/2016-04-28_57215594c10a1.jpg) (2)與上面類似，可以只對有 href 屬性的錨（a 元素）應用樣式： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> a[href] { color:red; } </style> </head> <body> <h1>可以應用樣式：</h1> <a href="http://phpStudy.net">phpStudy</a> <hr /> <h1>無法應用樣式：</h1> <a name="phpStudy">phpStudy</a> </body> </html> ~~~ 結果顯示為： ![](https://box.kancloud.cn/2016-04-28_57215594d3253.jpg) (3)還可以根據多個屬性進行選擇，只需將屬性選擇器鏈接在一起即可。例如，為了將同時有 href 和 title 屬性的 HTML 超鏈接的文本設置為紅色，可以這樣寫： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> a[href][title] { color:red; } </style> </head> <body> <h1>可以應用樣式：</h1> <a title="phpStudy Home" href="http://phpStudy.net">phpStudy</a> <hr /> <h1>無法應用樣式：</h1> <a href="http://phpStudy.net">phpStudy</a> <a title="phpStudy Home">phpStudy</a> </body> </html> ~~~ 運行結果為： ![](https://box.kancloud.cn/2016-04-28_57215594e5358.jpg) ### 二,屬性和值選擇器根據標簽中的具體屬性值選擇，除了選擇擁有某些屬性的元素，還可以進一步縮小選擇范圍，只選擇有特定屬性值的元素。下面的例子為 title="phpStudy" 的所有元素設置樣式： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> [title=phpStudy] { border:5px solid blue; } </style> </head> <body> <h1>可以應用樣式：</h1> <h2 title="phpStudy">Hello world</h2> <a title="phpStudy" href="http://phpStudy.net">phpStudy</a> <hr /> <h1>無法應用樣式：</h1> <p title="greeting">Hi!</p> <a class="phpStudy" href="http://phpStudy.net">phpStudy</a> </body> </html> ~~~ 瀏覽器運行的結果為： ![](https://box.kancloud.cn/2016-04-28_572155950214d.jpg) 需要注意的是：屬性與屬性值必須完全匹配。請注意，這種格式要求必須與屬性值完全匹配。如果屬性值包含用空格分隔的值列表，匹配就可能出問題。請考慮一下的標記片段： ~~~ <p class="important warning">This paragraph is a very important warning.</p> ~~~ 如果寫成 p[class="important"]，那么這個規則不能匹配示例標記。要根據具體屬性值來選擇該元素，必須這樣寫： ~~~ p[class="important warning"] {color: red;} ~~~ ### 三,屬性和值選擇器 - 多個值根據部分屬性值選擇如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。假設您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點： ~~~ p[class~="important"] {color: red;} ~~~ 如果忽略了波浪號，則說明需要完成完全值匹配。下面的例子為包含指定值的 title 屬性的所有元素設置樣式。適用于由空格分隔的屬性值： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> [title~=hello] { color:red; } </style> </head> <body> <h1>可以應用樣式：</h1> <h2 title="hello world">Hello world</h2> <p title="student hello">Hello phpStudy students!</h1> <hr /> <h1>無法應用樣式：</h1> <h2 title="world">Hello world</h2> <p title="student">Hello phpStudy students!</p> </body> </html> ~~~ 瀏覽器運行的結果為： ![](https://box.kancloud.cn/2016-04-28_5721559522999.jpg) 提示：部分值屬性選擇器與點號類名記法的區別該選擇器等價于我們在類選擇器中討論過的點號類名記法。也就是說，p.important 和 p["important"]應用到?HTML文檔時是等價的。那么，為什么還要有"~="屬性選擇器呢？因為它能用于任何屬性，而不只是 class。例如，可以有一個包含大量圖像的文檔，其中只有一部分是圖片。對此，可以使用一個基于 title 文檔的部分屬性選擇器，只選擇這些圖片： ~~~ img[title~="Figure"] {border: 1px solid gray;} ~~~ 這個規則會選擇 title 文本包含 "Figure"的所有圖像。沒有title屬性或者 title 屬性中不包含 "Figure" 的圖像都不會匹配。 ### 四,特定屬性選擇類型關于特定屬性選擇器。請看下面的例子： ~~~ [lang|="en"] {color: red;}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">?</span> ~~~ 上面這個規則會選擇 lang 屬性等于 en 或以 en- 開頭的所有元素。因此，以下示例標記中的前三個元素將被選中，而不會選擇后兩個元素： ~~~ <p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p> ~~~ 下面的例子為帶有包含指定值的 lang 屬性的所有元素設置樣式。適用于由連字符分隔的屬性值： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器演示</title> <style type="text/css"> [lang|=en] { color:red; } </style> </head> <body> <h1>可以應用樣式：</h1> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <hr /> <h1>無法應用樣式：</h1> <p lang="us">Hi!</p> <p lang="zh">Hao!</p></body> </html> ~~~ 瀏覽器運行的結果為： ![](https://box.kancloud.cn/2016-04-28_5721559534068.jpg) ### 五,子串匹配屬性選擇器下面為您介紹一個更高級的選擇器模塊，它是 CSS2 完成之后發布的，其中包含了更多的部分值屬性選擇器。按照規范的說法，應該稱之為“子串匹配屬性選擇器”。很多現代瀏覽器都支持這些選擇器，包括 IE7。下表是對這些選擇器的簡單總結： ![](https://box.kancloud.cn/2016-04-28_5721559545f10.jpg) 可以想到，這些選擇有很多用途。舉例來說，如果希望對指向 phpStudy 的所有鏈接應用樣式，不必為所有這些鏈接指定 class，再根據這個類編寫樣式。可以指定規則為： ~~~ a[href*="phpStudy.net"] {color: red;} ~~~ 這個例用等我們用到的時候再詳細的解釋。還有就是作用無class屬性的表單也非常的方便。