CSS屬性選擇器

風格HTML元素具有特定屬性

這是可能的樣式具有特定屬性或屬性值HTML元素。

CSS [屬性]選擇

在[attribute]選擇用於選擇具有特定屬性的元素。

以下示例選擇所有<a>與目標屬性的元素：

CSS [屬性=“值”]選擇

在[attribute="value"]選擇器是用來選擇與指定的屬性和值的元素。

以下示例選擇所有<a>一個元素target="_blank"屬性：

CSS [屬性〜=“值”]選擇

在[attribute~="value"]選擇器是用來選擇包含指定字的屬性值的元素。

以下示例選擇與包含文字，其中之一是“一個空格分隔列表中的title屬性的所有元素flower ”：

上面的例子會匹配元素title="flower", title="summer flower" ，而title="flower new" ，而不是title="my-flower"或title="flowers" 。

CSS [屬性| =“值”]選擇

在[attribute|="value"]選擇器是用來選擇與指定屬性的元素開始指定的值。

以下示例選擇與開頭的類屬性值的所有元素"top" ：

注：該值必須是一個完整的單詞，單獨，像class="top" ，或後跟一個連字符( - )如class="top-text" ！

CSS [^屬性=“值”]選擇

在[attribute^="value"]選擇器用於選擇其屬性值以指定值的元素。

以下示例選擇與開頭的類屬性值的所有元素"top" ：

注：該值不必須是一個完整的單詞！

CSS [屬性$ =“值”]選擇

在[attribute$="value"]選擇器用於選擇其屬性值與指定的值結束的元素。

以下示例選擇與結尾的class屬性值的所有元素"test" ：

注：該值不必須是一個完整的單詞！

CSS [屬性* =“值”]選擇

在[attribute*="value"]選擇器用於選擇其屬性值包含指定值的元素。

以下示例選擇使用包含class屬性值的所有元素"te"

注：該值不必須是一個完整的單詞！

樣式表單

屬性選擇器可以為無定型形式的有用class或ID ：

提示：請訪問我們的CSS教程表格關於如何風格CSS形式更多的例子。

自測練習用！

練習1» 練習2» 練習3» 練習4» 練習5» 練習6»

CSS選擇更多示例

使用我們的CSS選擇器測試儀來演示不同的選擇。

對於所有的CSS選擇器的完整參考，請訪問我們的CSS選擇參考 。