一篇文章帶你了解 CSS 屬性選擇器
屬性選擇器對(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è)[元素類型選擇器。
二、CSS [attribute]選擇器
這是屬性選擇器的最簡(jiǎn)單形式，如果給定的屬性存在，則將樣式規(guī)則應(yīng)用于元素。例如，可以title使用以下樣式規(guī)則來(lái)樣式化所有具有屬性的元素：
示例：
<!DOCTYPE html>
<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ò)將屬性選擇器放置在元素類型選擇器之后，將選擇范圍限制為特定的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。例如，它具有類值的元素相匹配warning，alert warning等等。
3、CSS [attribute |="value"]選擇器
可以使用|=運(yùn)算符使屬性選擇器與屬性具有以指定的值開(kāi)頭的連字符分隔的值列表的任何元素匹配：
示例：
<style>
p[lang|=en] {
color: #fff;
background: blue;
}
</style>
解析：
上例中的選擇器匹配具有l(wèi)ang屬性的所有元素，該屬性包含以開(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。
例如，它的元素相匹配具有類值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í)有幫助！
