CSS属性选择器

属性选择器

CSS的选择器大致有 元素选择器，类选择器，ID选择器，属性选择器。对于属性选择器，又可分为 简单属性选择器，具体属性值选择器，部分属性值选择器，特定属性选择类型。

简单属性选择器

如果希望选择具有某项属性的元素，如下：

a[href]
{
    ...
}

即可选择具有href属性的a元素；

具体属性值选择器

如果希望选择具有某项属性，并且对属性的值有要求，如下：

a[class="class1"]/*选择具有class属性并且值为class1的a元素*/
{
    ...
}

但是要注意，此处的值要完全匹配，如上述选择器对于

<a class="class1 class2">...</a>
<a class="class1">...</a>

这种，对于第一个a元素即无法完成匹配，这与类选择器不同，若采用类选择器

a.class1
{
    ...
}

上述两个a元素均能完成匹配。

根据部分属性值选择

部分属性值选择器，如下：

a[class~="class1"]
{
    ...
}

这种选择器构造等价于类选择器，即前面的两个a元素均能被匹配。

特定属性选择

*[lang|="en"]
{

}

将会选择lang属性等于en或者* en- 开头的元素*。