• 层叠机制的步骤


    层叠机制可以解决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元素的伪类书写顺序

  • 相关阅读:
    475. Heaters
    69. Sqrt(x)
    83. Remove Duplicates from Sorted List Java solutions
    206. Reverse Linked List java solutions
    100. Same Tree Java Solutions
    1. Two Sum Java Solutions
    9. Palindrome Number Java Solutions
    112. Path Sum Java Solutin
    190. Reverse Bits Java Solutin
    202. Happy Number Java Solutin
  • 原文地址:https://www.cnblogs.com/cj-18/p/8846842.html
Copyright © 2020-2023  润新知