您好,登錄后才能下訂單哦!
本篇文章展示了使用CSS的屬性選擇器的具體操作,代碼簡(jiǎn)明扼要容易理解,絕對(duì)能讓你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。
可以為擁有指定屬性的 HTML 元素設(shè)置樣式,而不僅限于 class 和 id 屬性。
注:只有在規(guī)定了 !DOCTYPE 時(shí),IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中,不支持屬性選擇。
屬性選擇器
下面的例子為帶有 title 屬性的所有元素設(shè)置樣式:
[title] { color:red; }
屬性和值選擇器
下面的例子為 title="W3School" 的所有元素設(shè)置樣式:
[title=hello] { border:5px solid blue; }
屬性和值選擇器 - 多個(gè)值
下面的例子為包含指定值的 title 屬性的所有元素設(shè)置樣式。適用于由空格分隔的屬性值:
[title~=hello] { color:red; }
下面的例子為帶有包含指定值的 lang 屬性的所有元素設(shè)置樣式。適用于由連字符分隔的屬性值:
[lang|=en] { color:red; }
設(shè)置表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設(shè)置樣式時(shí)特別有用:
<!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>
看完上述內(nèi)容,你們掌握使用CSS屬性選擇器的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。