选择器的优先级

首先选择器分为1.标签选择器（如，div,p,span,h1等）、2.类选择器（标签中的class属性名）、3.id选择器（标签中id属性名）。

相同选择器的优先级是 从上往下执行的

例：

span{

        color: red;

}

span{

        color: blue;

}

因为总从由上往下执行，所以此时span标签内的字体颜色为 蓝色

不同选择器之间的优先级则是：

                        id选择器 > 类选择器 > 标签选择器

可以类比为

                          100        >      10      >        1

若多层选择器嵌套时，就要注意他们的优先级关系了

如：

html:

<div id="a">
        <p class="b">
                <span>文字颜色</span>
        </p>
</div>

css

首先设置如下css样式

#a span {
        color: blue;
}

效果如下：

 若在其下方继续添加css样式，如下

#a span {
        color: blue;
}

#a .b span {
        color: red;
}

效果如下：

 若在其下方继续添加css样式，如下

 

#a span {
        color: blue;
 }

#a .b span {
        color: red;
}

 #a span {
        color: green;
}

效果如下：

这是为什么呢？

其实是因为第二个css样式的优先级更高

我们依次来看三个css样式的优先级

首先，第一个css，是由一个id选择器和一个标签选择器组合而成

 #a span {
        color: blue;
 }

所以他的优先级为 100+1

再看，第二个css，是由一个id选择器、一个标签选择器、一个标签选择器组合而成

#a .b span {
        color: red;
}

所以他的优先级为 100+10+1

而第三个css样式和第一个css样式相同，则优先级为 100+1

这样我们就可以很明显的看出来 第二个css样式的优先级(111) 是大于 另外两个css样式(101)的

所以优先执行第二个css，不会执行 由上而下覆盖的 规则

如何修改，才能使第三个css生效呢

只要将其调为同一优先级即可

 #a span {
        color: green;
}

改为

#a .b span {
        color: green;
}

即可，效果如下：