CSS选择器权重计算

      之前学习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
*/

上面的特指度越大表示权重越大。 


上述知识点可以参考:

   CSS设计指南(第三版)

   [英] Charles Wyke-Smith 著

   李松峰 译
 

 

转载于:https://www.cnblogs.com/weew12/p/10583047.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值