7、CSS 属性选择器
生活随笔
收集整理的這篇文章主要介紹了
7、CSS 属性选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
對帶有指定屬性的 HTML 元素設置樣式。
可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限于 class 和 id 屬性。
注釋：只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
屬性選擇器
下面的例子為帶有 title 屬性的所有元素設置樣式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img標簽</title> <style type="text/css"> [title]{color:red; } </style> </head> <body> <h1>可以應用的樣式：</h1> <h2 title="TITLE">TITLE</h2> <a title="LOL" href="http://lol.qq.com/">LOL</a><hr/><h1>無法應用樣式：</h1> <h2>TITLE</h2> <a href="http://lol.qq.com/">LOL</a> </body> </html>屬性和值選擇器
下面的例子為 title=“LOL” 的所有元素設置樣式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img標簽</title> <style type="text/css"> [title=LOL]{border:5px solid blue; } </style> </head> <body> <h1>可以應用的樣式：</h1> <h2 title="LOL">TITLE</h2> <a title="LOL" href="http://lol.qq.com/">LOL</a><hr/><h1>無法應用樣式：</h1> <h2>TITLE</h2> <a href="http://lol.qq.com/">LOL</a> </body> </html>屬性和值選擇器 - 多個值
下面的例子為包含指定值的 title 屬性的所有元素設置樣式。適用于由空格分隔的屬性值：
[title~=LOL] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img標簽</title> <style type="text/css"> [title~=LOL]{color:red; } </style> </head> <body> <h1>可以應用的樣式：</h1> <h2 title="LOL SN">TITLE</h2> <a title="SN LOL" href="http://lol.qq.com/">LOL</a><hr/><h1>無法應用樣式：</h1> <h2>TITLE</h2> <a href="http://lol.qq.com/">LOL</a> </body> </html>下面的例子為帶有包含指定值的 lang 屬性的所有元素設置樣式。適用于由連字符分隔的屬性值：
[lang|=SN] { color:red; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img標簽</title> <style type="text/css"> [lang|=SN]{color:red; } </style> </head> <body> <h1>可以應用的樣式：</h1> <h2 lang="SN">TITLE</h2> <h2 lang="SN-FIGHT-JGK">SN-FIGHT-JGK</h2> <a lang="SN-LOL" href="http://lol.qq.com/">LOL</a><hr/><h1>無法應用樣式：</h1> <h2>TITLE</h2> <a href="http://lol.qq.com/">LOL</a> </body> </html>設置表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type="text"] {width:200px;display: block;margin-bottom: 10px;background-color: yellow;font-family: Verdana,Arial; } </style> </head> <body> <form action="" name="input" method="get"><input type="text" name="Name" value="Bill" size="20"><input type="text" name="Name" value="Gates" size="20"><input type="Button" value="Example Button"> </form> </body> </html>CSS 選擇器參考
| [attribute] | 用于選取帶有指定屬性的元素。 |
| [attribute=value] | 用于選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用于選取屬性值中包含指定詞匯的元素。 |
| [attribute|=value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
| [attribute$=value] | 匹配屬性值以指定值結尾的每個元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
總結
以上是生活随笔為你收集整理的7、CSS 属性选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 6、CSS Id 和 Class类选择器
- 下一篇： 1、CSS Backgrounds（背景