zoukankan      html  css  js  c++  java
  • CSS结构和层叠

    特殊性

        特殊值表达为4个部分,如0, 0,  1, 0,一个选择器的具体特殊性如下:

            1.对于选择器中给定的各个ID属性值,加 0,1,0,0;

            2.对于选择器中给定的各个类属性值、属性选择或伪类,加 0,0,1,0;

            3.对于选择器中给定的各个元素和伪元素,加 0,0,0,1;

            4.结合符和通配选择器对特殊性没有任何贡献;

                示例:div ul li                        /* 0,0,0,3    3个元素选择器 */
                          div.aside ol li               /* 0,0,1,3    1个类选择器,3个元素选择器 */
                          a:hover                        /* 0,0,1,1    1个伪类选择器,1个元素选择器 */
                          div.navlinks a:hover    /* 0,0,2,2    1个类选择器,1个伪类选择器,2个元素选择器 */
                          .affix.top                     /* 0,0,2,0    多类选择器 注 */
                          input[type="text"]     /* 0,0,1,1    1个属性选择器,1个元素选择器 */
                          input[name="sex"][type="radio"]   /* 0,0,2,1    2个属性选择器,1个元素选择器 */
                          #title em                   /* 0,1,0,1    1个 ID 选择器,1个元素选择器 */
                          h1#title em               /* 0,1,0,2    1个 ID 选择器,2个元素选择器 */

                          *                                /* 0,0,0,0    1个通用选择器 */

    重要性:!important总是放在声明的最后,即分号前面;

    继承:指样式不仅会应用到指定元素,还会应用到它的后代元素

            注意:1.大多数框模型属性(包括外边距、内边距、背景和边框)都不能继承。

                      2.继承的bug:如果某元素中只包含纯文本继承能正常起作用,但如果文本中包含了超链接(a元素),用户

                       代理的超链接样式就会占上风,所以在web浏览器中,如果没有单独对a元素规定样式,则很有可能是蓝色。

    层叠

        层叠规则:1.找出所有相关规则,这些规则都包含与一个给定元素匹配的选择器;

                         2.按显式权重对应用到该元素的所有声明排序(创作人员>读者样式>用户代理);

                         3.按特殊性对应用到给定元素的所有声明排序;

                         4.按出现顺序对应用到给定元素的所有声明排序(越后出现,权重越大,主样式>外部导入样式)。

        推荐的链接样式顺序:link-visited-hover-active(LVHA),不过为了避免样式顺序对代码造成的影响,通常也可以

        把伪类链接起来,如::link:hover{color : red}

  • 相关阅读:
    noip2001统计单词个数
    查看大图 zoomImage
    图片懒加载 lazyload
    ANSI_NULLS 和 QUOTED_IDENTIFIER
    Framewrok损坏导致卸载不了的解决办法
    kindeditor 上传图片 显示绝对 路径
    Could not load file or assembly 'MagickNet.dll'
    sql server 复制 需要有实际的服务器名称才能连接到服务器……
    iisapp 命令 弹出 iisschlp.wsc [88,25] 属性值无效 progid
    IIS 301重定向 报错 地址后面有eurl.axd
  • 原文地址:https://www.cnblogs.com/xyddm/p/9141405.html
Copyright © 2011-2022 走看看