• CSS选择器的优先级


    在PHP程序员雷雪松的博客前面的文章已经详细的介绍了CSS选择器CSS常用的属性和值。下面再讲解一下CSS选择器的优先级。什么叫CSS选择器优先级呢简单的讲就是浏览器通过CSS选择器组成的匹配规则判断定义的多条CSS指令优先级,决定最忠元素显示的属性值。那下面就具体的看看关于CSS选择器优先级的规则。

    1、通过CSS选择器文件引入的方式。
    (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

    2、CSSS选择器的优先权,
    a. 内联样式表的权值最高1000
    b. ID 选择器的权值为100
    c. Class 类选择器或者属性选择符或者伪类的权值为10
    d. HTML标签选择器或者伪元素选择符的权值为1
    e.全局选择符*权值为0

    3、!important 规则通常拥有最高级别的规则,同样的CSS选择优先级后面的覆盖前面,自定义的CSS样式优先级大于CSS继承的和浏览器默认CSS的优先级。

    4、关于CSS选择器优先级的具体示例。

    选择器 计算结果
    * { } 0
    p { } 1  (HTML标签选择器)
    li:first-line { } 2  (HTML标签选择器,伪元素选择器)
    div span { } 2  (2个HTML标签选择器)
    ul ol+li { } 3  (3个HTML标签选择器)
    h1 + *[rel=up] { } 11  (HTML标签选择器,属性选择器)
    dl dt.red { } 13  (一个CLASS类选择器,3个HTML标签选择器)
    h2.red.level { } 21  (两个CLASS类选择器,HTML标签选择器)
    style=”” 10,0,0  (行内样式)
    #page 100  (ID选择器)
    body #main .left p { } 112  (两个HTML标签选择器,ID选择器, CLASS选择器类)
     
  • 相关阅读:
    数据库的创建与管理
    html+css画虚线,实线
    隐藏导航练习
    表单—注册邮箱
    整理—运算符l
    softmax函数理解
    离线配置Anaconda3+tensorflow-gpu1.4.0+cuda8.0+cudnn6.0
    stl总结精简版
    hdu_2030
    康托展开
  • 原文地址:https://www.cnblogs.com/leixuesong/p/5349699.html
Copyright © 2020-2023  润新知