ｃｓｓ屬性選取器

標籤：

接上篇ｃｓｓ基礎選取器，這部分主要總結一下ｃｓｓ屬性選取器的用法。

屬性選取器的作用：對帶有指定屬性的HTML 元素設定樣式。使用CSS3屬性選取器，你可以只指定元素的某個屬性，或者你還可以同時指定元素的某個屬性和其對應的屬性值。

話不多說：依然上代碼。

.demo {                margin: 50px auto;                width: 300px;                border: 1px solid #ccc;                padding: 10px;            }            .over-flow{                overflow: hidden;            }            li {                float: left;                height: 20px;                line-height: 20px;                width: 20px;                -moz-border-radius: 10px;                -webkit-border-radius: 10px;                border-radius: 10px;                text-align: center;                background: aqua;                color: green;                margin-right: 5px;                list-style: none;            }

  <div class="demo">                <ul class="over-flow">                    <li id="first" class="first">1</li>                    <li class="active important">2</li>                    <li class="important items">3</li>                    <li class="important">4</li>                    <li class="items">5</li>                    <li>6</li>                    <li>7</li>                    <li>8</li>                    <li>9</li>                    <li id="last" class="last">10</li>                </ul>            </div>

得到如下效果

１、 E[attr]：只使用屬性名稱，但沒有確定任何屬性值；

 li[id]{            background: red;           }

選擇li標籤下面有id屬性的元素，和這個屬性值沒關係

也可以使用多屬性進行選擇元素，如E[attr1][attr2], 這樣只要是同時具有這兩屬性的元素都將被選中

   li[id][class]{            background: red;           }

2、Ｅ[attr="value"]

E[attr]只是選擇了有對應的屬性，並沒有明確指其對應的屬性值"value"，而Ｅ[attr="value"]是指定了屬性值“value”，從而縮小了選擇 圍，更能精確選擇自己需要的元素。

  li[id="four"][class="important"]{            background: red;           }

E[attr="value"]屬性選取器也可以多個屬性並寫，進一步縮小選擇範圍：

此功能易錯點：屬性和屬性值必須完全符合，特別是對於屬性值是多個的形式時，屬性值必須全部列出。

比如下面這段代碼：

 li[id="two"][class="important"]{            background: red;           }

是沒有效果的

只有全部列出屬性值才可以，而且屬性值的順序也不能錯。

 li[id="two"][class="active important"]{            background: red;           }

3、E[attr~="value"]：與E[attr="value"]不同的是，他們兩者區別就是一個有“?”號，一個沒有“?”號，E[attr="value"]是屬性值需要完全符合才會被選中，而

E[attr~="value"]則是屬性值中只要有一個值匹配就可選中。

  li[class~="important"]{            background: red;           }

4、E[attr^="value"]指的是選擇attr屬性值以“value”開頭的所有元素。

  li[class^="active"]{            background: red;           }

5、E[attr$="value"]如果明白了第四個屬性選取器，那麼這個選取器則剛好相反。

這個運用在給你一些特殊的連結加背景圖片很方便的，比如說給pdf,png,doc等不同檔案加上不同icon。

為了更好的說明，我們在結構中插入兩個a串連

                     <li>8</li>                    <li>9</li>                    <li id="last" class="last">10</li>                    <li> <a href="sites/file/test.jpg" class="links item" title="this is a link" lang="zh-cn">11</a></li>                    <li><a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">12</a></li>

 li a[href$="jpg"]{            background: red;           }

a連結醜了一點，不過還是說明了問題。

6、E[attr*="value"]表示的是選擇attr屬性值中包含子串"value"的所有元素，

和E[attr~="value"]有相同的感覺。

 li[class*="important"]{            background: red;           }

7、E[attr|="value"]特定屬性選取器，首先attr後面的是一個豎線“｜”而不是l，這個選取器會選擇attr屬性值等於value或以value-開頭的所有元素。

  li a[lang|="zh"]{            background: red;           }

至此，關於css屬性選取器部分基本就這麼多了，要說明的一點是，屬性選取器除了IE6不支援外，其他的瀏覽器都能支援，

七種屬性選取器中E[attr="value"]和E[attr*="value"]是最實用的，其中E[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在網站中協助我們匹配不同類型的檔案，比如說你的網站上不同的檔案類型的連結需要使用不同的icon表徵圖，用來協助你的網站提高使用者體驗，就像前面的執行個體，可以通過這個屬性給".doc",".pdf",".png",".ppt"配置不同的icon表徵圖。

下一節，主要總結下css選取器中第三部分。偽類別選取器。

 

ｃｓｓ屬性選取器