伪类选择器是通过元素的一些特征或者元素当前的状态进行选择。而对于元素还有一个非常明显的区分方式，就是它们具有怎样的属性。比如链接，一般的都会具有 href 属性。但是一些用于锚点命名的（现在都直接用 id 命名了），可能就没有这个属性。我们可以通过属性选择器，来对它们进行区分。
属性选择器的写法是这个样子的，a[href]。这样还是比较容易理解的，就是一个具有 href 属性的链接（a）。
不过其实这是两个基础的选择器，放在了一起，去共同描述同一个元素，这种方法我们在前面是讲过的。那再看上面的选择器，a 肯定是一个基础的标签选择器；所以 [href] 就是一个基础的属性选择器，表示具有这个属性的元素。
一般的我们会把属性选择器和其他选择器联合使用，就是在某一类元素中筛选具有相同属性的元素。
在实际使用中，我们要进行的筛选可能会更加复杂，所以属性选择器，还可以在上面基础上进一步增强。不过这些方法用到的确实不太多，以至于我们现在即便全都学会，也会在使用之前忘掉。所以大概知道有些什么就可以了，用的时候再对着文档查找自己所需要的功能就好。
首先我们可以选择具有某一个属性，并且这个属性的值为某个确定值的元素。[href="https//dmnydn.com/"] 这样选择的就是所有链接地址为 https//dmnydn.com/ 的元素。
这很基础，很明确，但是不怎么好用。因为这是一个确切的地址，可能我希望匹配的却是所有链接到我网站的地址。明显的我不可能将所有的地址都列出来，但是它们具有共同的特征，就是所有链接到我网站的地址肯定都是以 https//dmnydn.com/ 来开头的。那我们可以这么写，[href^="https//dmnydn.com/"]，注意到区别在哪里了吗？如果了解正则表达式的话，会发现这个符号是相通的，虽然书写的格式不相同，但是符号所表达的意思是一样的。由此可以猜出，以某个字符串进行结尾的话，应该这么写 [href$=".html"]。这就是所有网址以 .html 进行结尾的元素。
如果只是希望这个属性的值里面包含某一个词，可以这样写 [href*="dmnydn"]。不过这种是在属性的值里面只要出现这个词，就会被匹配。那么比如像 class 这种属性，我想匹配其中的一个类。为了方便说明，我先写一个简单的例子：
<div class='miao miaoji mi mimi'> 1 </div><div class='miao'> 2 </div><div class='miaoji'> 3 </div><div class='mi'> 4 </div><div class='mimi'> 5 </div>这里有 5 个元素，我给他们写上了序号，如果我使用选择器 [class*='mi'] 这种选择，这 5 个元素都会被选中，因为它们的属性值中都包含有这个字符串。但如果我们想要找的是包含 mi 这个类的元素，上面的方法显然是不行的。即便我们希望通过给这个字符串增加空格来进行更确切的筛选也是做不到的。这时候我们可以使用 [class~='mi'] 进行选择。这表示这个属性的值，是一个以空格为分隔的列表，而列表中至少有一个值是和后面我们所指出的这个内容（’mi’）一致的。在这里就是这个元素必须具有 mi 这个类，所以被选中的元素只有 1 和 4。
单独拿出每一个属性选择器来讲，都说不上复杂，但是用到的少，而又有很多细节上的差异，想要彻底记住是比较困难的。不过我们也并没有要求大家记住，只是大概的了解都有些什么，知道我们可以通过元素的属性去选择元素，还可以再进一步通过元素属性的值去进行筛选，这就可以了。偶尔用到就打开文档，对照着去选择自己需要的东西。
暂无评论内容