class选择器和id选择器分别匹配HTML元素的class属性和id属性， 那有没有提供匹配HTML元素的其他属性的选择器呢？当然是有的，属性选择器就是用来匹配HTML元素的任意属性的。

属性选择器非常有用，因为HTML元素的属性是可以进行扩展的，很多的第三方库就是根据扩展HTML元素的属性进行工作的。

Since:CSS2.1

匹配设置了attribute属性的任意HTML元素。

示例：

[checked] {
    font-size: 18px;
}

Since:CSS2.1

匹配设置了attribute属性的HTML元素E。

示例：

input[checked] {
    font-size: 18px;
}

Since:CSS2.1

匹配设置了attribute属性、并且该属性的值是value的HTML元素E。

示例：

button[class="btn"] {
    font-size: 18px;
}

Since:CSS2.1

匹配设置了attribute属性、并且该属性的值其中之一是value的HTML元素E。

HTML元素某些属性是可以同时设置多个值的，最常见的就是class属性的值，这多个值之间用空格隔开。

示例：

button[class~="btn"] {
    font-size: 18px;
}

Since:CSS2.1

匹配设置了attribute属性、并且该属性的值以value-开头的HTML元素E。

通常用于lang属性，该属性的值通常是en、en-us、en-gb等， 这些属性值有个特点是以相同的前缀开始，并用-连接起来的。

示例：

p[lang|="en"] {
    font-size: 18px;
}

Since:CSS3

匹配设置了attribute属性、并且该属性的值以value开头的HTML元素E。

很明显，这个是借鉴了正则表达式的符号。

示例：

code[class^="language-"] {
    background: #2e0c24;
}

Since:CSS3

匹配设置了attribute属性、并且该属性的值以value结尾的HTML元素E。

很明显，这个是借鉴了正则表达式的符号。

示例：

code[class$="java"] {
    background: #2e0c24;
}

Since:CSS3

匹配设置了attribute属性、并且该属性的值中包含value的HTML元素E。

示例：

code[class*="language-"] {
    background: #2e0c24;
}