一篇文章帶你了解CSS 屬性選擇器
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
屬性選擇器對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。
一、了解屬性選擇器
CSS屬性選擇器提供了一種簡(jiǎn)單而強(qiáng)大的方法，可以根據(jù)特定屬性或?qū)傩灾档拇嬖趯邮綉?yīng)用于HTML元素。
可以通過(guò)將屬性（可選地帶有值）放在一對(duì)方括號(hào)中來(lái)創(chuàng)建屬性選擇器。也可以在其前面放置一個(gè)[元素類(lèi)型選擇器。
二、CSS [attribute]選擇器
這是屬性選擇器的最簡(jiǎn)單形式，如果給定的屬性存在，則將樣式規(guī)則應(yīng)用于元素。例如，可以title使用以下樣式規(guī)則來(lái)樣式化所有具有屬性的元素：
示例
<html><head><meta charset="utf-8"><title>CSS 屬性選擇器示例title><style>[title] {color: blue;}style>head><body style="background-color: aqua;"><h1 title="heading">屬性選擇器h1><p title="paragraph">此段落的顏色將為藍(lán)色。p>body>html>
[title]上例中的選擇器匹配具有title屬性的所有元素。
還可以通過(guò)將屬性選擇器放置在元素類(lèi)型選擇器之后，將選擇范圍限制為特定的HTML元素。
示例
<style>abbr[title] {color: red;}style>
選擇器abbr[title]僅匹配具有title屬性的元素，因此它匹配縮寫(xiě)，但不匹配具有屬性的錨元素title。
1. CSS [attribute="value"]選擇器
可以使用=運(yùn)算符使屬性選擇器匹配屬性值與給定值完全相等的任何元素：
示例
<style>input[type="text"] {border:1px solid red;}input[type="submit"] {border:1px solid green;}style>
解析：
上例中的選擇器匹配[ input 具有type屬性值等于的所有元素submit。
2. CSS [attribute?="value"]選擇器
可以使用~=運(yùn)算符來(lái)使屬性選擇器與屬性值是由空格分隔的值（例如class="alert warning"）的列表的任何元素匹配，其中一個(gè)值等于指定的值：
示例
<style>[class~="warning"] {color: #fff;background: red;}style>
該選擇器將任何具有class屬性的HTML元素匹配，該屬性包含以空格分隔的值，其中一個(gè)為warning。例如，它具有類(lèi)值的元素相匹配warning，alert warning等等。
3. CSS [attribute |="value"]選擇器
可以使用|=運(yùn)算符使屬性選擇器與屬性具有以指定的值開(kāi)頭的連字符分隔的值列表的任何元素匹配：
示例
<style>p[lang|=en] {color: #fff;background: blue;}style>
解析：
上例中的選擇器匹配具有lang屬性的所有元素，該屬性包含以開(kāi)頭的值en，無(wú)論該值后面是否帶有連字符和更多字符。換句話說(shuō)，它的元素相匹配lang具有價(jià)值屬性en，en-US，en-GB等,而不能為US-en，GB-en。
4. CSS [attribute ^="value"]選擇器
可以使用^=運(yùn)算符使屬性選擇器與屬性值以指定值開(kāi)頭的任何元素匹配。它不必是一個(gè)完整的詞。
示例
<style>a[href^="http://"] {background:url(img/border.png) 100% 50% no-repeat;padding-right: 15px;}style>
上例中的選擇器將定位所有外部鏈接并添加一個(gè)小圖標(biāo)，指示它們將在新的選項(xiàng)卡或窗口中打開(kāi)。
5. CSS [attribute *="value"]選擇器
可以使用*=運(yùn)算符使屬性選擇器匹配其屬性值包含指定值的所有元素。
示例
<style>[class*="warning"] {color: #fff;background: red;}style>
注:
上例中的此選擇器將所有HTML元素與classvalue包含的屬性進(jìn)行匹配warning。
例如，它的元素相匹配具有類(lèi)值warning，alert warning，alert-warning或alert_warning等。
三、使用屬性選擇器樣式化表單
屬性選擇器對(duì)于不帶class或的樣式樣式特別有用id：
示例
input[type="text"], input[type="password"] {width: 150px;display: block;margin-bottom: 10px;background: yellow;}input[type="submit"] {padding: 2px 10px;border: 1px solid #804040;background: #ff8040;}
四、總結(jié)
本文基于CSS基礎(chǔ)，講解了CSS 屬性選擇器，了解屬性選擇器的含義，對(duì)一些常見(jiàn)的屬性通過(guò)案例進(jìn)行詳細(xì)的講解。最后通過(guò)一個(gè)小項(xiàng)目，樣式化表單，進(jìn)一步的加深理解。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行