CSS 屬性選擇器
CSS屬性選擇器
顧名思義,CSS 屬性選擇器就是指可以根據元素的屬性以及屬性值來選擇元素。
具有特定屬性的HTML元素樣式
具有特定屬性的 HTML 元素樣式不僅僅是 class 和 id。
注意:IE7 和 IE8 需聲明 !DOCTYPE 才支持屬性選擇器!IE6 和更低的版本不支持屬性選擇器。
屬性選擇器
下面的例子是把包含標題(title)的所有元素變為藍色:
實例
[title]
{ color:blue; }
{ color:blue; }
屬性和值選擇器
下面的實例改變了標題title='w3cschool'
元素的邊框樣式:
實例
[title=w3cschool]
{ border:5px solid green; }
{ border:5px solid green; }
屬性和值的選擇器 - 多值
下面是包含指定值的title
屬性的元素樣式的例子,使用(~
)分隔屬性和值:
實例
[title~=hello] { color:blue; }
下面是包含指定值的lang
屬性的元素樣式的例子,使用()分隔屬性和值:
實例
[lang|=en] { color:blue; }
表單樣式
屬性選擇器樣式無需使用 class 或 id 的形式:
實例
input[type="text"]
{ width:150px;
display:block;
margin-bottom:10px;
background-color:yellow; }
input[type="button"]
{ width:120px;
margin-left:35px;
display:block; }
{ width:150px;
display:block;
margin-bottom:10px;
background-color:yellow; }
input[type="button"]
{ width:120px;
margin-left:35px;
display:block; }
相關文章
CSS 參考手冊:CSS [attribute|=value] 選擇器