zoukankan      html  css  js  c++  java
  • CSS学习笔记(三)层叠和特殊性

    在样式表现时,有可能会出现两个或更多的样式寻找同一元素,这就可能出现表现层的不确定性和样式冲突

    CSS通过“层叠”给每个规则分配一个重要度

    层叠一般采用以下重要度层次:

      * 标准!important的用户样式

      * 标准!important的作者样式

      * 作者样式

      * 用户样式

      * 浏览器和用户代理应用的样式

    根据选择器的特殊性决定规则的次序,若是特殊性相同,后定义的规则优先。

    特殊性

    为了计算选择器的特殊性,每种选择器被分配一个数字值,将规则的每个选择器的值加在一起,计算出规则的特殊性。

    选择器的特殊性分为四个等级:a、b、c、d

      * 行内样式一般为,a=1

      * b=ID选择器的数量

      * c=类、伪类和属性选择器的数量

      * d=类型选择器和伪元素选择器数量

    选择器                            特殊性                      以10为基数的特殊性

    style=""                           1,0,0,0                        1000

    #wp #content{}                        0,2,0,0                        200    

    #content .date{}                       0,1,1,0                        110

    div #conent{}                         0,1,0,1                        101

    p .content{}                         0,0,1,1                        11

    有上述特殊性计算可知,

    用style属性编写的规则总是比其他任何规则特殊

    有ID选择器的规则比没有ID选择器的规则特殊

    具有类选择器的规则比只具有类型选择器的规则特殊

    若特殊性相同,则后定义的规则优先

    在样式表中使用特殊性

    可以对一般元素使用一般样式,然后在更特殊的元素上覆盖它们

    form {width:30px}

    form#search {15px}

    一种使用特殊性的方法是在主体标签(body)上应用ID或类,这样可以根据页面或站点范围内覆盖样式

    #nav {float:left;}

    .homepage #nav {float:right;}

    继承

    应用样式的元素后代会继承样式的某些属性,比如,字体,字号,颜色

    p h1 h2 h3 ul li {color:black;}

    更简洁的作法是:

    body{color:black;}

  • 相关阅读:
    【转】return 使用示例
    java基础_二维数组的行和列
    新版SQL授权用户时报错 near 'IDENTIFIED BY '密码' with grant option' at line 1
    GO kafka sarama 生产者 消费者 简单 实现
    Windows 安装kafka
    windows 连接nsq
    reflect: call of reflect.Value.NumField on ptr Value
    django 数据库 mysql 事务 处理
    python 类的继承
    python 中 insert 返回 None
  • 原文地址:https://www.cnblogs.com/qixing/p/2856030.html
Copyright © 2011-2022 走看看