css中选择器特殊性的使用小技巧

<a href="baidu.com">这是一个有 href 的 <a> 标签</a>
<a>这是一个没有 href 的 <a>标签</a>
<a href="baidu.com" class="red">应该显示成红色的 <a> 标签</a>
<style>
a[href] {
  color: #00cccc;
  text-decoration: underline;}

a.red {color: red;}
</style>

如果a.red变成.red
选择器中的每个元素增加的特殊性为 0, 0, 0, 1
每个类和每个属性选择增加的特殊性都是 0, 0, 1, 0
选择器 a[href] 的特殊性为 0, 0, 1, 1
而选择器 .red 的特殊性只有 0, 0, 1, 0
.red 的特殊性并没有超过 a[href]，因此无法把 a[href] 的样式覆盖掉。而a.red和a[href]权重一样，且class后出现。因此后一个为red。

因此<style>中class中最好加上元素。。