zoukankan      html  css  js  c++  java
  • 选择器优先级

    CSS优先级:是由四个级别和各级别的出现次数决定的。

    四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。

    优先级的算法:
      每个规则对应一个初始"四位数":0、0、0、0
      若是 行内选择符,则加1、0、0、0
      若是 ID选择符,则加0、1、0、0
      若是 选择符/属性选择符/伪类选择符,则分别加0、0、1、0
      若是 元素(标签)选择符/伪元素选择符,则分别加0、0、0、1
      算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。  

    需注意的:

    • !important的优先级是最高的,但出现冲突时则需比较”四位数“;
    • 优先级相同时,则采用就近原则,选择最后出现的样式;
    • 继承得来的属性,其优先级最低;

      !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

    简洁、高效的css

    所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。
          1.不要再ID选择器前使用标签名
     解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必要
          2.不要在类选择器前使用标签名
     解释:如果没有相同的名字出现就是没必要,但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如(p.colclass{color:red;} 和 span.colclass{color:red;}
          3.尽量少使用层级关系;
             #divclass p.colclass{color:red;}改为  .colclass{color:red;}
          4.使用类选择器代替层级关系(如上)
  • 相关阅读:
    ubuntu安装ruby的几种方法总结
    使用一年ESB感受
    web工程迁移---在一个jboss5或jboss6中运行多个实例
    web工程迁移---weblogic8迁移到jboss5遇到的异常
    web工程迁移---jboss5迁移到jboss6
    Git使用(3)
    Git使用(2)
    Git使用(1)
    Spring4 mvc+maven 框架搭建(3)
    Spring4 mvc+maven 框架搭建(2)
  • 原文地址:https://www.cnblogs.com/embrace-ly/p/10703165.html
Copyright © 2011-2022 走看看