一篇文章帶你了解 CSS 屬性選擇器
屬性選擇器對帶有指定屬性的 HTML 元素設置樣式。可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限于 class 和 id 屬性。
一、了解屬性選擇器
CSS屬性選擇器提供了一種簡單而強大的方法，可以根據特定屬性或屬性值的存在將樣式應用于HTML元素。
可以通過將屬性（可選地帶有值）放在一對方括號中來創建屬性選擇器。也可以在其前面放置一個[元素類型選擇器。
二、CSS [attribute]選擇器
這是屬性選擇器的最簡單形式，如果給定的屬性存在，則將樣式規則應用于元素。例如，可以title使用以下樣式規則來樣式化所有具有屬性的元素：
示例：
<!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">此段落的顏色將為藍色。</ p>
</body>
</html>
??????
[title]上例中的選擇器匹配具有title屬性的所有元素。
還可以通過將屬性選擇器放置在元素類型選擇器之后，將選擇范圍限制為特定的HTML元素。
示例：
<style>
abbr[title] {
color: red;
}
</style>
??????
選擇器abbr[title]僅匹配具有title屬性的元素，因此它匹配縮寫，但不匹配具有屬性的錨元素title。
1. CSS [attribute="value"]選擇器
可以使用=運算符使屬性選擇器匹配屬性值與給定值完全相等的任何元素：
示例：
<style>
input[type="text"] {
border:1px solid red;
}
input[type="submit"] {
border:1px solid green;
}
</style>
圖片
解析：
上例中的選擇器匹配[ input 具有type屬性值等于的所有元素submit。
2. CSS [attribute?="value"]選擇器
可以使用~=運算符來使屬性選擇器與屬性值是由空格分隔的值（例如class="alert warning"）的列表的任何元素匹配，其中一個值等于指定的值：
示例：
<style>
[class~="warning"] {
color: #fff;
background: red;
}
</style>
??????
該選擇器將任何具有class屬性的HTML元素匹配，該屬性包含以空格分隔的值，其中一個為warning。例如，它具有類值的元素相匹配warning，alert warning等等。
3. CSS [attribute |="value"]選擇器
可以使用|=運算符使屬性選擇器與屬性具有以指定的值開頭的連字符分隔的值列表的任何元素匹配：
示例：
<style>
p[lang|=en] {
color: #fff;
background: blue;
}
</style>
圖片
解析：
上例中的選擇器匹配具有lang屬性的所有元素，該屬性包含以開頭的值en，無論該值后面是否帶有連字符和更多字符。換句話說，它的元素相匹配lang具有價值屬性en，en-US，en-GB等,而不能為US-en，GB-en。
4. CSS [attribute ^="value"]選擇器
可以使用^=運算符使屬性選擇器與屬性值以指定值開頭的任何元素匹配。它不必是一個完整的詞。
示例：
<style>
a[href^="http://"] {
background:url(img/border.png) 100% 50% no-repeat;
padding-right: 15px;
}
</style>
圖片
上例中的選擇器將定位所有外部鏈接并添加一個小圖標，指示它們將在新的選項卡或窗口中打開。
5. CSS [attribute *="value"]選擇器
可以使用*=運算符使屬性選擇器匹配其屬性值包含指定值的所有元素。
示例：
<style>
[class*="warning"] {
color: #fff;
background: red;
}
</style>注:
上例中的此選擇器將所有HTML元素與classvalue包含的屬性進行匹配warning。
例如，它的元素相匹配具有類值warning，alert warning，alert-warning或alert_warning等。
三、使用屬性選擇器樣式化表單
屬性選擇器對于不帶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;
}
圖片
四、總結
本文基于CSS基礎，講解了CSS 屬性選擇器，了解屬性選擇器的含義，對一些常見的屬性通過案例進行詳細的講解。最后通過一個小項目，樣式化表單，進一步的加深理解。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
