摘要：如果页面上的链接很多或者对跳转页面的协议有要求，使用属性选择器配合伪元素对链接的协议进行提示也不失为一种好方法。
CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。
属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器，尽可能的去挖掘这个选择器在不同场景下的不同用法。
简单的语法介绍[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
子串值（Substring value）属性选择器，下面几个属于 CSS3 新增语法，也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式。
[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串
CSS 属性选择器的最基本用法属性选择器最基本的用法，就是通过元素的属性值去选择 DOM 元素。像这样，将选中所有带 href 属性的DOM 元素：
[href] {
color: red;
}
CodePen Demo -- 属性选择器基本用法
复杂一点点的用法 层叠选择div [href]{
...
}
多条件复合选择
选择一个 img 标签，它含有 title 属性，并且包含类名为 logo 的元素。
img[title][class~=logo]{
...
}
伪正则写法
i 参数
忽略类名的大小写限制，选择包含 class 类名包含子字符串为 text，Text，TeXt... 等情况的 p 元素。
这里的 i 的含义就是正则里面参数 i 的含义，ignore，忽略大小写的意思。
p[class*="text" i] {
...
}
所以上面的选择器可以选中类似这样的目标元素：
g 参数
与正则表达式不一样，参数 g 在这里表示大小写敏感（case-sensitively）。然而，这个属性当前仍未纳入标准，支持的浏览器不多。
CodePen Demo -- 属性选择器的伪正则用法
配合 :not() 伪类还有一种比较常用的场景就是搭配:not() 伪类，完成一些判断检测性的功能。譬如下面这个选择器，就可以选取所有没有 [href] 属性的 a 标签，添加一个红色边框。
a:not([href]){
border: 1px solid red;
}
当然，复杂一点，我们可以搭配不仅仅一个 :not()伪类，像是这样，可以同时多个配合使用，选择一个 href, target, rel 属性都没有的 a 标签：
a:not([href]):not([target]):not([rel]){
border: 1px solid blue;
}
CodePen Demo -- 属性选择器配合 :not 伪类
重写行内样式？甚至乎，如果有这种场景，我们还可以覆盖掉行内样式，像这样:
xxxxxx
我们可以使用属性选择器强制覆盖掉上述样式：
[style*="color: red"] {
color: blue !important;
}
组合拳用法，搭配伪元素提升用户体验
当然，属性选择器不一定只是单单的进行标签的选择。
配合上伪元素，我们可以实现很多有助提升用户体验的功能。
角标功能这里有一个小知识点，伪元素的 content 属性，通过 attr(xxx)，可以读取到对应 DOM 元素标签名为 xxx 的属性的值。
所以，配合属性选择器，我们可以很容易的实现一些角标功能：
Message
div {
position: relative;
width: 200px;
height: 64px;
}
div::before {
content: attr(count);
...
}
这里右上角的数字 5 提示角标，就是使用属性选择器配合伪元素实现，可以适应各种长度，以及中英文，能够节省一些标签。CodePen Demo -- 属性选择器实现角标功能
属性选择器配合伪元素实现类 title 功能我们都知道，如果给一个图片添加一个 title 属性，当 hover 到图片上面的时，会展示 title 属性里面附加的内容，类似这样：
这里不一定是 img 标签，其他标签添加 title 属性都能有类似的效果。但是这里会有两个问题：
响应太慢，通常鼠标 hover 上去要隔 1s 左右才会出现这个 title 框
框体结构无法自定义，弹出框的样式无法自定义
所以这里，如果我们希望有一些自己能够控制样式的可快速响应的浮层，可以自定义一个类 title 属性，我们把它称作 popTitle，那么可以这样操作：
这是一段描述性文字
这是一段描述性文字
p[popTitle]:hover::before {
content: attr(popTitle);
position: absolute;
color: red;
border: 1px solid #000;
...
}
对比一下，第一个是原生自带的 title 属性，下面两个是使用属性选择器配合伪元素模拟的提示：
浏览器自带的 title 属性延迟响应是添加一层防抖保护，避免频繁触发，这里也可以通过对伪元素添加一个100毫秒级的 transition-delay 实现延迟展示。
CodePen Demo -- 属性选择器配合伪元素实现类 title 功能
商品展示提示效果好，上面的运用实例我们再拓展一下，考虑如何更好的运用到实际业务中，其实也是有很多用武之地的。譬如说，通过属性选择器给图片添加标签，类似一些电商网站会用到的一个效果。
我们希望给图片添加一些标签，在 hover 图片的时候展示出来。
当然，CSS 中，诸如、、