• css样式优先级


    多重样式优先级:如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下:
    (内联样式)Inline style >(内部样式)Internal style sheet >(外部样式)External style sheet 
     有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
     
    css选择器权重计算方式一:
    将特殊性分为4个等级
    a.第一等,行内样式,权值为1000
    b.第二等,id选择器,权值为100
    c.第三等,class选择器,权值10
    d.第四等,类型选择器和伪元素选择器,权值为1
    通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。
    But,这个计算方式其实是有点问题的。。。
     
    正确的计算方式如下所示:
    CSS选择器权重计算方式二:
    1.A:如果是行内样式,A=1,否则A=0;
    2.B:计算该选择器中ID的数量。
    3.C:计算该选择器中class、伪类、属性选择器等的数量。
    4.D:计算该选择器中伪元素及标签的数量。
    计算权重值时,A,B,C,D四组值,从左到右,分组比较。如果A相同,比较B,如果B相同,比较C,如果C相同,比较D,如果D相同,后定义的优先。
     
    举个栗子:样式一:body header div navulli div p a span em {color: red}
                      样式二:.count {color: blue}
    按照计算方法一,样式一的权重值是11,样式二的权重值是10,如果这两条规则用于同一个元素,则该元素应该是红色,实际结果却是蓝色。
     
    CSS 优先级法则:
    A  选择器都有一个权值,权值越大越优先;
    B  当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
    C  创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
    D  继承的CSS 样式优先级低于后来指定的CSS 样式;
    E  在同一组属性设置中标有“!important”规则的优先级最大。
     
  • 相关阅读:
    75. Sort Colors
    101. Symmetric Tree
    121. Best Time to Buy and Sell Stock
    136. Single Number
    104. Maximum Depth of Binary Tree
    70. Climbing Stairs
    64. Minimum Path Sum
    62. Unique Paths
    css知识点3
    css知识点2
  • 原文地址:https://www.cnblogs.com/wqhwe/p/10184000.html
Copyright © 2020-2023  润新知