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选择参考 。