• CSS总结(四)—— CSS选择器优先级


    css选择器优先级
     
    优先顺序:
         1、!important (IE6不支持此属性)  
         2、html中元素标签添加的style=“”(css难以管理,不推荐)
         3、一个或多个id选择器
             例:#top{margin:0;}
         4、一个或多个类选择器(包括属性、伪类选择器)
             例:.outer{}   [data-job="frontend"]{}    a:active{}
         5、标签选择器
             例:div{margin:3px;}
         6、通配选择器
             例:*{margin:10px;}
     
    ★ 选择器规则:
      选择器权值相加,大的优先
      若权值相同,后定义的优先
      同一级别的个数多的优先级高,数量相同比较下一级别的个数
     
    权值
         style=“”——1000
         id选择器  ——100
         类选择器/属性选择器/伪类选择器 ——10
         标签/伪对象 ——1
         通配选择器  ——0

    例:找出下面优先级相同的选择器

      A. img.thumb:after  B.[data-job="frontend"]::first-letter
     
      C. #main::before     D. [type="checkbox"]:checked  E. ul#shop-list
    答案:
     
    A. img.thumb:after,总纬度是0,0,1,2(即:1+10+1=12;)

    B.[data-job="frontend"]::first-letter,总纬度是0,0,1,1(即:10+1=11;)

    C. #main::before,总纬度是0,1,0,1(即:100+1=101;)

    D. [type="checkbox"]:checked,总纬度是0,0,2,0(即:10+10=20;)

    E. ul#shop-list,总纬度是0,1,0,1(即:1+100=101;)

    由于该题目假定样式来源一致,因此样式优先级相同的就是C和E了。 

  • 相关阅读:
    正则表达式
    npm 和package.json 文件
    React Element /组件/JSX
    Express 入门
    vue-router 基本使用
    content_form.class.php文件不完整 解决方案
    Yii查询count()
    android之在view中内嵌浏览器的方法
    YII中利用urlManager将URL改写成restful风格
    关于YII中layout中的布局和view中数据的关系
  • 原文地址:https://www.cnblogs.com/emory/p/5302851.html
Copyright © 2020-2023  润新知