CSS三大特性之优先级

来源：互联网发布：网络管理软件排行榜编辑：程序博客网时间：2024/05/16 05:59

CSS三大特性之优先级

概念：当多个选择器选中同一个标签，并且给同一个标签设置同一个属性时，如何层叠就由优先级来决定。

顺序：！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承->默认样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title>    <style>        body{            color: red;        }        p{            color: blue;        }        *{            color: brown;        }        #para{            color: pink;        }        .para{            color: black;        }    </style></head><body><div>    <ul>        <li>            <p id="para" class="para">这是一个段落！</p>        </li>    </ul></div></body></html>

输出结果显示：

优先级判断的三种方式：

1. 是不是直接选中(间接选中就是指继承)；

在上面的例子中已经有所体现；

2.相同选择器：哪一个标签写在后面就显示哪一个标签的设置的属性；’

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>test</title>    <style>        p{            color: red;        }        p{            color: aqua;        }    </style></head><body><div>    <ul>        <li>            <p id="para" class="para">这是一个段落！</p>        </li>    </ul></div></body></html>

显示结果：

3.不同选择器：都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠

在上面的例子中已经有所体现；

important 简介：

用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被制定的属性的优先级提升为最高。

注意事项：

important只能用于直接选中，不能用于间接选中；通配符选择器选中的标签也是直接选中的；！important只能提升被制定的属性的优先级，其他的属性的优先级不会被提升；！important必须写在属性值的分号前面；！important前面的感叹号不可以省略。

权重

概念：当多个选择器混合在一起使用的时候，我们可以通过计算权重来判断谁的优先级最高。

计算规则：

首先先计算选择器的中有多少个id，id多的选择器优先级最高；如果id的个数相同，再看看类名的个数，类名个数多的优先级最高；如果类名的个数相同，那么再看标签名称的个数，标签名称个数多的优先级最高；如果id的个数一样，类名的个数也一样，标签名称的个数也一样，那么就不会继续往下计算了，那么此时谁写在后面听谁的，也就是说优先级如果一样，那么谁写在后面就显示谁的属性。

注意：只有选择器是直接选中标签的才需要计算权重，否则一定会听直接选中的选择器。

！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

权重：

作用：多个选择器组合以后的优先级

算法：（0，0，0，0）==》第一个0是important的个数，第二个0是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重。权重是优先级的算法，层叠是优先级的表现

选择器的工作原理：选择器是从右我往左查找

关于权重计算的可以参考 http://blog.csdn.net/k491022087/article/details/52373452

0 0