對具有指定屬性的 HTML 元素設定樣式。 ( 建議學習:CSS入門教學 )
可以為擁有指定屬性的 HTML 元素設定樣式,而不僅限於 class 和 id 屬性。
註:只有在規定了 !DOCTYPE 時,IE7 和 IE8 才支援屬性選擇器。在 IE6 及更低的版本中,不支援屬性選擇。
屬性選擇器
下面的範例為所有帶有title 屬性的元素設定樣式:
[title] { color:red; }
屬性和值選擇器
下面的範例為title="W3School" 的所有元素設定樣式:
[title=hello] { border:5px solid blue; }
#屬性與值選擇器- 多個值
#下面的範例為包含指定值的title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值:
[title~=hello] { color:red; }
下面的範例為帶有包含指定值的 lang 屬性的所有元素設定樣式。適用於連字符分隔的屬性值:
[lang|=en] { color:red; }
設定表單的樣式
屬性選擇器在設定為不帶有class 或id 的表單時特別有用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; } </style> </head> <body> <form name="input" action="" 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的屬性選擇器使用詳解(css入門教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!