zoukankan      html  css  js  c++  java
  • CSS选择器的特殊性

      在我们为元素添加样式的时候,或多或少会出现一个元素会有几个不同规则的样式。有#id的,有.class,直接标签元素的,还有各种组合起来的选择器。那CSS到底如何解决这些冲突呢,我们这次专门来探讨一下。

      CSS也称层叠样式,层叠(cascade)也就是说,将重复定义的样式,先通过重要度的筛选,再通过一定的规则,重新排列覆盖。而这个规则就是,选择器的特殊性。(重要度就不详细说明了,一般认为!important>行内样式>内联样式表>外联样式表>浏览器默认样式)

      特殊性

    每种选择器都会默认分配一个数值,然后将一个规则的选择器数值相加,计算出其特殊性。

      选择器的特殊性有4个等级,a,b,c,d(正常来说,一个规则的选择器应该不会超过10个,这样我们可以转化成以10为基数计算特殊性)

    • a:行内样式,那么a = 1 。
    • b:ID选择器的总数 。
    • c:类、伪类和属性选择器的总数。
    • d:类型选择器和伪元素选择器总数。

    或许这样说,有点难以理解,我们可以举栗子。

    style = ""             ------------ 特殊性:1000
    
    #warp #content{}       ------------ 特殊性:200
    
    #content .smClass{}    ------------ 特殊性:110
    
    div.#content{}         ------------ 特殊性:101
    
    #content{}             ------------ 特殊性:100
    
    p.class1.class2        ------------ 特殊性:21
    
    p.class1               ------------ 特殊性:11
    
    .class                 ------------ 特殊性:10
    
    div p{}                ------------ 特殊性:2
    
    p{}                     ------------ 特殊性:1  
    

     当然,若一个元素的两套规则特殊性相等,则后定义的规则优先。

    通过这样一番描述,相信大家对选择器的特殊性有了一定的了解。所以当出现了一些样式定义却未显示的情况时,要看一下是否有样式覆盖的情况,合理使用样式表选择器的优先级。

    大家赶紧动手去试试吧!

    (若有不准确或错误的地方,希望大家指出,我会赶紧修改)

  • 相关阅读:
    Unity3D学习笔记(十九):UGUI、Image、Text、Button
    Unity3D学习笔记(十八):动画内容补充
    Unity3D学习笔记(十七):IK动画、粒子系统和塔防
    Unity3D学习笔记(十六):Animator新动画
    Unity3D学习笔记(十五):寻路系统
    Unity3D学习笔记(十四):Animation旧动画
    Unity3D学习笔记(十三):委托、考试复习
    Unity3D学习笔记(十二):2D模式和异步资源加载
    加密解密
    linux 常用命令
  • 原文地址:https://www.cnblogs.com/YikaJ/p/3998364.html
Copyright © 2011-2022 走看看