CSS 屬性選擇器

2022-05-19 15:31 更新

CSS 屬性 選擇器

顧名思義,CSS 屬性選擇器就是指可以根據(jù)元素的屬性以及屬性值來選擇元素。


具有特定屬性的HTML元素樣式

具有特定屬性的 HTML 元素樣式不僅僅是 class 和 id。

注意:IE7 和 IE8 需聲明 !DOCTYPE 才支持屬性選擇器!IE6 和更低的版本不支持屬性選擇器。


屬性選擇器

下面的例子是把包含標(biāo)題(title)的所有元素變?yōu)樗{(lán)色:

實(shí)例

[title]
{ color:blue; }

嘗試一下 ?


屬性和值選擇器

下面的實(shí)例改變了標(biāo)題 title='w3cschool' 元素的邊框樣式:

實(shí)例

[title=w3cschool]
{ border:5px solid green; }

嘗試一下 ?


屬性和值的選擇器 - 多值

下面是包含指定值的 title 屬性的元素樣式的例子,使用(~)分隔屬性和值:

實(shí)例

[title~=hello] { color:blue; }

嘗試一下 ?

下面是包含指定值的 lang 屬性的元素樣式的例子,使用(|)分隔屬性和值:

實(shí)例

[lang|=en] { color:blue; }

嘗試一下 ?


表單樣式

屬性選擇器樣式無需使用 class 或 id 的形式:

實(shí)例

input[type="text"]
{ width:150px;
display:block;
margin-bottom:10px;
background-color:yellow; }
input[type="button"]
{ width:120px;
margin-left:35px;
display:block; }

嘗試一下 ?

相關(guān)文章

CSS 參考手冊:CSS [attribute|=value] 選擇器

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)