CSS 屬性選擇器

屬性選擇器選擇具有特定的屬性或者具有特定值的屬性的 HTML 元素。

瞭解屬性選擇器

CSS 屬性選擇器提供了一種簡單而強大的方法，可以根據特定屬性或屬性值的存在將樣式應用於 HTML 元素。

你可以通過將屬性（可選是否帶有值）放在一對方括號中來建立屬性選擇器。你也可以在它之前放置一個元素型別選擇器。

以下部分描述了最常見的屬性選擇器。

CSS [attribute]選擇器

這是屬性選擇器的最簡單形式，如果給定屬性存在，則將樣式規則應用於元素。例如，我們可以使用以下樣式規則設定具有屬性 title 的所有元素的樣式：

[title] {
    color: blue;
}

上例中的 [title] 選擇器匹配具有 title 屬性的所有元素。

你還可以通過將屬性選擇器放在元素型別選擇器之後將此選擇限制為特定的 HTML 元素，如下所示：

abbr[title] {
    color: red;
}

選擇器 abbr[title] 僅匹配具有 title 屬性的 <abbr> 元素，因此它能與 abbr 匹配，但不匹配具有 title 屬性的anchor元素。

CSS [attribute = “value” ]選擇器

你可以使用 = 運算子使屬性選擇器匹配其屬性值與給定值完全相等的任何元素：

input[type="submit"] {
    border: 1px solid green;
}

上例中的選擇器匹配具有 type 值等於 submit 的屬性的所有 <input> 元素。

CSS [attribute~ = “value” ]選擇器

你可以使用 ~= 運算子使屬性選擇器匹配其屬性值為空格分隔值列表 （如 class="alert warning"）的任何元素，其中一個元素完全等於指定值：

[class~="warning"] {
    color: #fff;
    background: red;
}

此選擇器將任何 HTML 元素與 class 包含空格分隔值的屬性進行匹配，其中一個值為 warning 。例如，它與具有類值 warning ， alert warning 等等的元素相匹配。

CSS [attribute | = “value” ]選擇器

你可以使用 |= 運算子使屬性選擇器匹配其屬性具有以指定值開頭的以連字元分隔的值列表的任何元素 ：

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

上例中的選擇器匹配具有開頭為 en 的 lang 屬性的所有元素，無論該值是否後跟連字元和更多字元。換句話說，它匹配所有屬性值為 en en-US en-GB 的 lang 屬性的元素，但不匹配下面的屬性值 US-en、GB-en。

CSS [attribute ^ = “value” ]選擇器

你可以使用 ^= 運算子使屬性選擇器匹配屬性值以指定值開頭的任何元素。它不一定是一個完整的詞。

a[href^="http://"] {
    background: url("external.png") 100% 50% no-repeat;
    padding-right: 15px;
}

上例中的選擇器將以所有外部連結為目標，並新增一個小圖示，表示它們將在新選項卡或視窗中開啟。

CSS [attribute $ = “value” ]選擇器

同樣，你可以使用 $= 運算子選擇屬性值以指定值結尾的所有元素。它不一定是一個完整的詞。

a[href$=".pdf"] {
    background: url("pdf.png") 0 50% no-repeat;
    padding-left: 20px;
}

上例中的選擇器選擇連結到 PDF 文件的所有 <a> 元素，並新增一個小 PDF 圖示，以向使用者提供有關連結的提示。

CSS [attribute * = “value” ]選擇器

你可以使用 *= 運算子使屬性選擇器匹配其屬性值包含指定值的所有元素。

[class*="warning"] {
    color: #fff;
    background: red;
}

上面示例中的選擇器匹配 class 屬性的值為 warning 的所有 HTML 元素。例如，它的元素相匹配具有類值 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;
}