CSS选择器权重计算

最新推荐文章于 2022-04-05 23:09:28 发布

anmei3400

最新推荐文章于 2022-04-05 23:09:28 发布

阅读量177

点赞数

原文链接：http://www.cnblogs.com/weew12/p/10583047.html

版权

之前学习CSS ，在图书馆找了一本CSS的入门书籍，里面简单的介绍了一下关于权重的计算，但是讲的比较死板，不容易记，什么一个类选择器是多少，一个id选择器是多少。。。balabala...（所以后来回想，也就忘了很多了。。。）最近在看另外一本关于CSS的书里面，作者给出了一个容易记住，且不容易忘记的好方法，在这儿分享一下：

（计算权重or计算特指度）：

I-C-E公式：

I代表：id选择器

C代表：class也就是类选择器

E代表：element元素，也就是标签选择器

三个字母间的短横线是分隔符，并非减号。针对这个公式的计算方法如下：
1. 选择符中有一个 ID，就在 I 的位置上加 1；
2. 选择符中有一个类，就在 C 的位置上加 1；
3. 选择符中有一个元素（标签）名，就在 E 的位置上加 1；
4. 得到一个三位数。

计算样例：

P {}
/*
    一个元素
    0-0-1 特指度=1  
*/

p.largetext {}
/*
    一个元素 一个类
    0-1-1 特指度=11
*/

p#largetext {}
/*
    一个元素 一个id
    1-0-1 特指度=101
*/

body p#largetext {}
/*
    两个元素 一个id
    1-0-2 特指度=102
*/

body p#largetext ul.mylist {}
/*
    三个元素 一个id 一个类
    1-1-3 特指度=113
*/

body p#largetext ul.mylist li {}
/*
    四个元素 一个id 一个类
    1-1-4 特指度=114
*/