zoukankan      html  css  js  c++  java
  • 关于CSS的优先级,CSS优先级计算

     1 原则一: 继承不如指定
     2 原则二: #id > .class > 标签选择符
     3 原则三:越具体越强大
     4 原则四:标签#id >#id ; 标签.class > .class
     5 
     6 CSS优先级权重计算法
     7 
     8 CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数!
     9 
    10 根据这四个级别出现的次数计算得到CSS的优先级。
    11 
    12 CSS优先级的计算规则如下:
    13 * 元素标签中定义的样式(Style属性),加1,0,0,0
    14 * 每个ID选择符(如 #id),加0,1,0,0
    15 * 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
    16 * 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
    17 然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
    18 然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。
    19 
    20 例子:
    21 css文件或<style>中如下定义:
    22 1. h1 {color: red;}
    23 /* 一个元素选择符,结果是0,0,0,1 */
    24 2. body h1 {color: green;}
    25 /* 两个元素选择符,结果是 0,0,0,2 */
    26 3. h2.grape {color: purple;}
    27 /* 一个元素选择符、一个Class选择符,结果是 0,0,1,1*/
    28 4. li#answer {color: navy;}
    29 /* 一个元素选择符,一个ID选择符,结果是0,1,0,1 */
    30 元素的style属性中如下定义:
    31 h1 {color: blue;}
    32 /* 元素标签中定义,一个元素选择符,结果是1,0,0,1*/
    33 
    34 如此以来,h1元素的颜色是蓝色。
    35 注意:
    36 1、!important声明的样式优先级最高,如果冲突再进行计算。
    37 2、如果优先级相同,则选择最后出现的样式。
    38 3、继承得到的样式的优先级最低。
  • 相关阅读:
    Bootstrap 2.2.2 的新特性
    Apache POI 3.9 发布,性能显著提升
    SQL Relay 0.48 发布,数据库中继器
    ProjectForge 4.2.0 发布,项目管理系统
    红帽企业 Linux 发布 6.4 Beta 版本
    红薯 快速的 MySQL 本地和远程密码破解
    MariaDB 宣布成立基金会
    Percona XtraBackup 2.0.4 发布
    Rocks 6.1 发布,光盘机群解决方案
    精通Servlet研究,HttpServlet的实现追究
  • 原文地址:https://www.cnblogs.com/kingwell/p/2673711.html
Copyright © 2011-2022 走看看