CSS 屬性選擇器

屬性選擇器對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。 可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。

了解屬性選擇器

CSS屬性選擇器提供了一種簡(jiǎn)單而強(qiáng)大的方法，可以根據(jù)特定屬性或?qū)傩灾?/a>的存在將樣式應(yīng)用于HTML元素。

您可以通過將屬性（可選地帶有值）放在一對(duì)方括號(hào)中來創(chuàng)建屬性選擇器。您也可以在其前面放置一個(gè)元素類型選擇器。

以下各節(jié)描述了最常見的屬性選擇器。

CSS [attribute]選擇器

這是屬性選擇器的最簡(jiǎn)單形式，如果給定的屬性存在，則將樣式規(guī)則應(yīng)用于元素。例如，我們可以title使用以下樣式規(guī)則來樣式化所有具有屬性的元素：

[title] {
    color: blue;
}

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

您還可以通過將屬性選擇器放置在元素類型選擇器之后，將選擇范圍限制為特定的HTML元素，如下所示：

abbr[title] {
    color: red;
}

選擇器abbr[title]僅匹配具有title屬性的元素，因此它匹配縮寫，但不匹配具有屬性的錨元素title。

CSS [attribute="value"]選擇器

您可以使用=運(yùn)算符使屬性選擇器匹配屬性值與給定值完全相等的任何元素：

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

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

CSS [attribute?="value"]選擇器

您可以使用~=運(yùn)算符來使屬性選擇器與屬性值是由空格分隔的值（例如class="alert warning"）的列表的任何元素匹配，其中一個(gè)值等于指定的值：

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

該選擇器將任何具有class屬性的HTML元素匹配，該屬性包含以空格分隔的值，其中一個(gè)為warning。例如，它具有類值的元素相匹配warning，alert warning等等。

CSS [attribute |="value"]選擇器

您可以使用|=運(yùn)算符使屬性選擇器與屬性具有以指定的值開頭的連字符分隔的值列表的任何元素匹配：

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

上例中的選擇器匹配具有lang屬性的所有元素，該屬性包含以開頭的值en，無論該值后面是否帶有連字符和更多字符。換句話說，它的元素相匹配lang具有價(jià)值屬性en，en-US，en-GB等,而不能為US-en，GB-en。

CSS [attribute ^="value"]選擇器

您可以使用^=運(yùn)算符使屬性選擇器與屬性值以指定值開頭的任何元素匹配。它不必是一個(gè)完整的詞。

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

上例中的選擇器將定位所有外部鏈接并添加一個(gè)小圖標(biāo)，指示它們將在新的選項(xiàng)卡或窗口中打開。

CSS [attribute $="value"]選擇器

同樣，可以使用$=運(yùn)算符選擇屬性值以指定值結(jié)尾的所有元素。它不必是一個(gè)完整的詞。

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

上例中的選擇器選擇鏈接到PDF文檔的所有元素，并添加一個(gè)小的PDF圖標(biāo)，以向用戶提供有關(guān)鏈接的提示。

CSS [attribute *="value"]選擇器

您可以使用*=運(yùn)算符使屬性選擇器匹配其屬性值包含指定值的所有元素。

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

上例中的此選擇器將所有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;
}