HTML 元素的属性的名字还有属性的值也可以作为选择器。写法是一组方括号，里面是属性还有属性的值。如果方括号里只有属性的名字，选中的就是使用了这个属性的元素。

在这个 a 元素的上面，可以用 traget 属性设置在哪里打开链接，比如把它的值设置成 _blank，表示在新的页面打开这个链接地址。如果是 _self 就表示在当前页面打开链接地址。

如果你想给 traget 属性的值是 _blank 的 a 元素添加点样式，可以使用属性选择器。在样式表里，用 a[traget="_blank"]::after 作为选择器，这个选择器里组合使用了类型选择器，属性选择器，还有伪元素。

写一段样式，把 content 属性的值设置成一个箭头符号。然后把 font-size 设置成 10px，再用 padding-left 添加点左边的内边距，大小是 4 像素。再用 padding-right 添加 4 个像素的右边的内边距。

现在，页面上的这个链接文本的右边就会出现一个箭头符号。这段样式里用了属性选择器，元素的类型首先得是 a，并且它的 traget 属性的值必须是 _blank，选中的是这种元素的 ::after 这个伪元素。

data 属性

HTML 元素上有一些全局共用的属性，比如 id，class 这些都属于通用属性。还有一些是元素专有的属性，比如这个 a 元素上的 traget 属性。另外我们还可以在元素上添加一些自定义的属性，这些属性需要使用 data- 作为前缀 。

比如在这个标题元素上添加一个自定义的属性，名字是 data-emoji，把它的值设置成 wilted-flower，表示枯萎的花。在样式表里，可以用 data-emoji 这个属性的名字作为选择器，再加上 ::before 这个伪元素，把 margin-right 设置成 8 像素。

再用 data-emoji="wilted-flower" 作为选择器，后面加上 ::before 这个伪元素，写一段样式，把 content 设置成一个表情符号。

页面上的标题的左边会出现一个表情符号，这个样式是用 data 自定义属性还有属性的值作为选择器应用到元素上的。