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

創(chuàng)新互聯(lián)公司是專業(yè)的青龍網(wǎng)站建設(shè)公司，青龍接單;提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行青龍網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

一、了解屬性選擇器

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)樣式化所有具有屬性的元素：

示例：

    
        
        
        
    
    
        
屬性選擇器


            
此段落的顏色將為藍(lán)色。
    

??????

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

還可以通過(guò)將屬性選擇器放置在元素類型選擇器之后，將選擇范圍限制為特定的HTML元素。

示例：

??????

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

1. CSS [attribute="value"]選擇器

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

示例：

圖片

解析：

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

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

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

示例：

??????

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

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

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

示例：

圖片

解析：

上例中的選擇器匹配具有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è)完整的詞。

示例：

圖片

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

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

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

示例：

注:

上例中的此選擇器將所有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)手，才可以理解的更加深刻。

分享文章：一篇文章帶你了解CSS屬性選擇器
網(wǎng)站地址：http://m.5511xx.com/article/coisgph.html