zoukankan      html  css  js  c++  java
  • 层叠机制的步骤

    层叠机制可以解决CSS声明冲突

    步骤如下

    一、比较优先级

    CSS出现声明冲突时,优先级高的会保留,优先级低的会淘汰,声明的优先级与它的来源和重要性有关

    按照优先级从低到高的顺序:

    浏览器的默认样式表中的声明

    用户样式表中的普通声明

    作者样式表中的普通声明

    作者样式表中的重要声明

    用户样式表中的重要声明

    二、比较特殊性

    特殊性也叫特指值,特指度,当出现声明冲突时,特殊性高的会被保留,特殊性低的会被淘汰,声明的特殊性取决于规则适用范围的大小

    1.按照特殊性从高到低的顺序:

    行内样式

    ID选择器

    类选择器

    元素选择器

    通配符选择器

    2.当比较特殊性时,每一个冲突的声明,会生成四个字母(a,b,c,d)来比较特殊性

    a越大,特殊性越高,当a相同时,比较b,b越大,特实行越高,c,d同理

    a:当声明为行内样式,a为1,否则为0

    b:规则中ID选择器的个数

    c:规则中类选择器、属性选择器和伪类选择器的个数

    d:规则中元素选择器、伪元素选择器的个数

    例如:                                                                  a        b       c       d  (个数)

    a{color:blue; font-size:22px;}                                0        0       0       1

    .foo{color:yellow;}                                                 0        0       1       0

    #bar{color:red; background-color:white;}             0        1       0       0

    .main>div #nav *.home a:link{color:green;}          0        1       3       2

    3.当计算选择器分组的时候,要分开计算

    三.比较源次序

    最后出现的声明胜出,其他的全部淘汰

    此规则的实际应用:

    CSSreset代码前置

    a元素的伪类书写顺序

  • 相关阅读:
    外媒评出的中国最美的地方
    外媒评出的中国最美的地方
    中国十大徒步路线,你走过几个?
    中国十大徒步路线,你走过几个?
    还在用Ghost?Windows 7时代用True Image了
    查看手机已经记住的WIFI密码
    查看手机已经记住的WIFI密码
    量子力学的经典教材
    量子力学的经典教材
    索尼全画幅微单A7/A7R上市
  • 原文地址:https://www.cnblogs.com/cj-18/p/8846842.html
Copyright © 2011-2022 走看看