Day02 CSS选择器特殊性（权重）计算法则

CSS选择器特殊性（权重）计算法则

选择器的特殊性分为4个等级：a、b、c和d，各等级特殊性逐渐降低（即a>b>c>d）。其中，

首先优先级是在属性后面使用！important

1. 如果样式是行内样式，那么a = 1 （行内）
2. b等于ID选择器（#tag）的总数（id）
3. c等于类（.tag）、伪类（a:hover）和属性选择器（a[title]）的数量（类and伪类and属性）
4. d等于类型选择器（span）和伪元素选择器（span:before）的数量（标签and伪元素）
   最后优先级是通配选择器：*{margin：6px；}

选择器	特殊性
style = “”	1 0 0 0
div#content	0 1 0 1
p.comment .dateposted {}	0 0 2 1
content .dataPoseted {}	0 1 1 0
div p {}	0 0 0 2

举例：

无法修改颜色的标签

<style>
  a {
    color: #333;
    text-decoration: none;
  }
  a[href] {
    color: #00cccc;
    text-decoration: underline;
  }
</style>

<a href="baidu.com">这是一个有 href 的 &lt;a&gt; 标签</a>
<a>这是一个没有 href 的 &lt;a&gt; 标签</a>

有一天，想把某个链接中的文字改成红色，加了如下代码

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

<a href="baidu.com" class="red">这是一个应该显示成红色的 &lt;a&gt; 标签</a>

但是，没有任何变化。。。。
根据选择器特殊性的计算方法：
选择器a的特殊性为0,0,0,1
选择器a[href]的特殊性为0,0,1,1
选择器.red的特殊性为0,0,1,0

.red的特殊性没有超过a[href]，因此无法把前面的样式覆盖掉