• css的优先级以及!important的使用


      CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后,就一直把CSS的优先级记挂在心里(自觉告诉自己这地方很可能会摔跤)。起初可能是因为自己的项目经验不够丰富,或者是自己所接触到的项目都是小规模的前端,也或与自己书写CSS的习惯有关(自己基本上就是逐层书写CSS,尽量把代码写得干净整洁),CSS优先级并没有成为某次项目的绊脚石。直到某次项目,因为用到的CSS库与自己页面的设计稿有冲突,才再次重视起CSS的优先级。

      以下就将有关CSS的优先级的知识进行归纳整理:

      

      ①继承的不如指定的;②id>class>标签选择符;③越具体的样式越强大;④标签 id>id;标签 class>class。

      CSS优先级权重的计算方法:CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优  先级,规则如下:

        ①元素标签中定义的样式,加1000;

        ②每个ID选择符,加0100;

        ③每个Class选择符、每个属性选择符、每个伪类,加0010;

        ④每个元素选择符或伪元素选择符,加0001;

        将这四个数字分别累加,就得到每个CSS定义的优先级的值,然后从左到右逐位比较大小,数字大的CSS样式的优先级高。

     

      举例:

      假设对应example.html在example.css文件中定义如下样式:

      1. h1{color:red;}  /*一个元素选择符,结果为0001*/

          2. body h1{color:green;} /*两个元素选择符,结果是0002*/

          3. h2.grape{color:purple;} /*一个元素选择符、一个Class选择符,结果是0011*/

          4. li#answer{color:navy;} /*一个元素选择符,一个ID选择符,结果是0101*/

      而同时在example.html中有:

      <style>

        h1{color:blue;}

      </style>   /*元素标签中定义,一个元素选择符,结果是1001*/

     

      1001是有关h1样式中计算最大的,所以h1元素的颜色应该是蓝色的。

     

      有关CSS优先级的计算就介绍到此。

      接下来介绍!important:

      

      !important声明的样式优先级最高。

      如何想更透彻掌握!important,如下博客链接可能会对你有所帮助:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html

      

  • 相关阅读:
    github绑定host
    PHP安全过滤函数
    PHP界定符 <<<EOT
    file_get_contents模拟表单(POST/GET方式提交)
    排序算法(一)冒泡排序
    MySQL的limit查询优化
    SQL Server日期函数集合
    系统查找存储过程和触发器
    C#中跳转页面有那几种方法,简述其区别
    知道sql数据库中的哪个数据表最大
  • 原文地址:https://www.cnblogs.com/Iwillknow/p/3436168.html
Copyright © 2020-2023  润新知