在CSS中按數據屬性選擇元素

是否能夠經過CSS5的HTML5數據屬性（例如data-role ）選擇元素？

---

#1樓

在現代瀏覽器中，還能夠選擇屬性而無論其內容如何

與：

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

例如： http : //codepen.io/jasonm23/pen/fADnu

在至關大比例的瀏覽器上運行。

注意，這也能夠在JQuery選擇器中使用，也可使用document.querySelector

---

#2樓

值得注意的是CSS3子串屬性選擇器

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

---

#3樓

您能夠組合多個選擇器，這很酷，您能夠根據其值選擇每一個屬性和屬性，例如僅基於CSS的值基於href來選擇。

經過屬性選擇器，您可使用id和class屬性玩一些額外的遊戲

這是關於「 屬性選擇器」的精彩閱讀

小提琴

a[href="http://aamirshahzad.net"][title="Aamir"] { color: green; text-decoration: none; } a[id*="google"] { color: red; } a[class*="stack"] { color: yellow; }

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a> <br> <a href="http://google.com" id="google-link" title="Google">Google</a> <br> <a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

瀏覽器支持：
IE6 +，Chrome，Firefox和Safari

您能夠在此處查看詳細信息 。

---

#4樓

若是您的意思是使用屬性選擇器 ，那麼爲何不這樣作：

[data-role="page"] {
    /* Styles */
}

我能夠連接到文檔中介紹各類可用於各類場景的屬性選擇器。 請注意，儘管自定義數據屬性是「新的HTML5功能」，

• 瀏覽器一般在支持非標準屬性方面沒有任何問題，所以您應該可以使用屬性選擇器進行過濾； 和

• 您也沒必要擔憂CSS驗證，由於CSS不在意非命名空間的屬性名稱，只要它們不破壞選擇器語法便可。

---

#5樓

帶有小片斷的CSS屬性選擇器和有效示例

1- [attribute〜=「 value」]

2- [attribute ^ =「 value」]

3- [attribute $ =「 value」]

4- [attribute | =「 value」]

5- [attribute * =「 value」]

/* Seven (because it search in all words)*/ div[class="items"] { color: red; }

<div class="items-group">One</div> <div class="groupitems">Two</div> <div class="itemsgroup">Three</div> <div class="group-items">Four</div> <div class="items group">Five</div> <div class="group items">Six</div> <div class="items">Seven</div>

〜用於選擇具備包含指定單詞的屬性值的元素

/* Five Six Seven (because it search in all words)*/ div[class~="items"] { color: red; }

<div class="items-group">One</div> <div class="groupitems">Two</div> <div class="itemsgroup">Three</div> <div class="group-items">Four</div> <div class="items group">Five</div> <div class="group items">Six</div> <div class="items">Seven</div>

^用於選擇屬性值以指定值開頭的元素。

/* One Three Five Seven (because it search in beginning)*/ div[class^="items"] { color: red; }

<div class="items-group">One</div> <div class="groupitems">Two</div> <div class="itemsgroup">Three</div> <div class="group-items">Four</div> <div class="items group">Five</div> <div class="group items">Six</div> <div class="items">Seven</div>

$選擇器用於選擇屬性值以指定值結尾的元素。

/* Two Four Six Seven (Because it search from end) */ div[class$="items"] { color: red; }

<div class="items-group">One</div> <div class="groupitems">Two</div> <div class="itemsgroup">Three</div> <div class="group-items">Four</div> <div class="items group">Five</div> <div class="group items">Six</div> <div class="items">Seven</div>

| 用於選擇具備指定屬性（從指定值開始）的元素。

/* One Seven (because it start from beggining and search -(hyphen)). ignore started from end */ div[class|="items"] { color: red; }

<div class="items-group">One</div> <div class="groupitems">Two</div> <div class="itemsgroup">Three</div> <div class="group-items">Four</div> <div class="items group">Five</div> <div class="group items">Six</div> <div class="items">Seven</div>

*用於選擇屬性值包含指定值的元素。

/* One Two Three Four Five Six (because it search all group)*/ div[class*="group"] { color: red; }

<div class="items-group">One</div> <div class="groupitems">Two</div> <div class="itemsgroup">Three</div> <div class="group-items">Four</div> <div class="items group">Five</div> <div class="group items">Six</div> <div class="items">Seven</div>