我们可以使用元素里的属性作为选择器 … 属性名称的周围加上一个方括号 .. 表示选择拥有方括号里的这个属性的元素 … 我们也可以指定多个属性 … 这就表示去选择同时拥有这些属性的元素 …

也可以指定属性的具体的值 … 它的意思是去选择拥有这个属性，并且拥有具体的这个值 … 有些属性里可能有多个值，不同的值之间用空格分隔开 … 选择属性里包含使用空格分隔开的某个值，可以在 = 号前面加上一个 ~ 号 …

等号前面也可以是 竖线，它表示，属性的值是等号后面这个具体的值 … 或者是以这个值开头并且后面带 - 线的值 …

测试

比如我们要选择文档里面包含 data-album 属性的所有的元素 … 然后去应用点样式 …

[data-album] {
border: 1px solid #ccc;
margin-left: -1px;
margin-bottom: -1px;
}

方括号前面可以加上标签的名称，让这个选择器更具体一些 … 它表示，选择包含 data-album 属性的所有的 li 元素 ..

下面我们再去选择，拥有 data-album 属性，并且它的值是 single 的 li 元素里面的 img 元素 …

li[data-album=single] img {
border-radius: 50%;
}

注意这里并没有选中第一个图像元素，因为它的父元素 li 的 data-album 属性的值里，不仅有 single ，还有 atlas 这个值 .. 想要选中它的话，可以在等号前面加上一个 ~ 线 ..