元素的属性也可以用在选择器里面 … 你可以选择带某些特定属性的元素 … 或者属性有具体的值，或者值里包含某些特定的文字 …

在这个页面上， 我在包围图像的 li 标签上添加了一个 data-album 属性 … 这个属性其实是我自己造的 … 在 HTML5 的规范里，支持我们在元素上添加用 data 开头的自定义的属性 ..

这里我用 data-album 属性表示音乐专辑 … 如果专辑里面只有一首音乐，这样我们把它的值设置成 single .. 表示这是一个单曲 … 如果专辑里面有多首音乐的话 … data-album 属性的值我设置成了 multiple …

下面我们在控制台上试一下使用元素属性选择元素 …

测试

先试一下只使用属性的名称来选择元素 … 在方括号里，可以输入属性的名称 … $( '[data-album]' )

找到的结果就是所有包含 data-album 属性的元素 …

在属性的前面，也可以加上其它的选择元素的方法 … 比如，加上标签的名字 …

$( 'li[data-album]' )

这样找到的就是在 li 元素里面包含 data-album 属性的元素 … 我们也可以给属性指定具体的值 …

比如找到所有 data-album 属性的值是 single 的 li 元素下面的 img 元素 … $( 'li[data-album="single"] > img' ).addClass( 'img-circle' )

这里我用了一个大于号 .. 它表示元素的直接的子元素 …

然后用了一个等号设置属性的值 … 表示属性的具体的值 … 再为找到的结果添加了一个 img-circle 的类 …

在等号前面可以加上一个 ! 号，表示不是这个值 …

$( 'li[data-album!="single"] > img' ).addClass( 'img-thumbnail' )

现在找到出来的结果就是 data-album 属性的值不是 single 的所有的 li 元素下面的 img 元素 … 为找到的结果添加一个 img-thumbnail 的类 ..

包含值 *， ~

使用单独的一个等号表示包含的具体的值，也就是所选择的元素里面的这个属性的值里不能包含其它的东西 …

回到网页的代码 … 在第一个列表项目的 data-album 属性里加上点其它的东西 … 除了 single ，加上一个空格 … 然后是这个专辑的名字 …

（#控制台）

使用同样代码 … 现在，就不能选中刚才添加了专辑名称在 data-album 属性里的那个元素了. ..

这种情况，我们可以使用 * 号等于，或者 ~ 号等于 … 这两个符号表示包含某个值 …

区别是，~ 号等于只会包含用空格分隔开的值 … * 号等于不在乎有没有空格，只要属性的值里包含设置的字符就可以 ..

刷新一下 …

在等号前面加上一个 ~ …

这样会选择上 data-album 属性里有用空格分隔开的 single 值的元素了 …

值的位置 $ ，^

另外，我们还可以指定设置的属性的值出现的位置 . .. ^= 表示属性的值是以设置的字符开始的 … $=，表示属性的值是以设置的字符结束的 …