原创内容！转载请保留作者名字和出处。
fangle，http://www.28star.com/blog/2008/06/06/css-priority.html

CSS(Cascading Style Sheets)样式的最终选择涉及到继承层叠顺序等，就好比人类世界的mozilla和ie家族模式。
[1位重要标志位] > [4位特殊性标志] > 声明先后顺序
注：样式表比html后载入

1. 重要声明（!important）
   [1位重要标志位]
   div{
    display:none !important;
    display:block;
   }
   虽然按照顺序应该是使用后声明的display:block;，但是因为!important的缘故，所以最后使用的却是display:none;。
   好比现任家族族长。可以定下某一个孩子为继承人，其他人无法反驳，反驳就一段胖揍。
   1. 读者[1]（用户[2]）
   2. 创作人员[3]（内容提供者[4]）
2. 正常声明
   [4位特殊性标志。点分四段（0.0.0.0），形式类似与ip地址]
   有一些老式游览器使用3位特殊标志，也就是4位标示中的前两位合并。
   样式表选择器支持类似文档数结构的层级选择，故特殊标志位随定义的选择器层级加权。
   （每次给某个标志位加1，不带进位的哦）
   优先级从左至右，前一段对后一段具有无可辩驳的压倒性优势。
   （后一段就算无穷大也无法战胜前一段的1。）
   就像贵族一样，家里有4个孩子，每个人都在成长中学习知识（有点修学分的感觉），自己的知识永远是自己的财富。
   众所周知哥哥总比弟弟有一定的优势，不论地位或权利。
   尤其在于次子们再优秀也无法替换长子接管家族，想篡位的时候可以只能让哥哥们消失了，嘿嘿。
   1. 创作人员正常声明
      1. 内联样式[1.0.0.0]
         在html文档的元素中直接插入样式的
         就是在第一位标志位加1
         <div style=”display:none;”></div>
         在ie6中此优先级与id选择器同级
         族长的第一个孩子，不论好坏，出生就被内定为家族继承人。
         注：有特殊情况，ie6之前只有三位特殊标志位，内联样式[1.0.0]被合并到id选择器中[1.0.0]，且因为css文档比html后载入，所以后声明的会覆盖前面声明的。
         话说ie家族早年平定邪教的时候中了一个邪恶的诅咒：六子之长子。
         说的是一个持续了6代的诅咒，其中每代的长子必活不过家中第二个孩子成年之日。
         不过我觉得这个诅咒下的比较仓促，所以诅咒只在长子和家中第二个孩子间发生，和其他孩子没关系，所以只要舍弃第二个孩子就可以了。
      2. id选择器[0.1.0.0]
         就是在第2位标志位加1
         应用于对应id的元素，css中用“#”后跟id来标记。
         #header{
          display:none;
         }
         <div id=”header“></div>
         二儿子虽不是第一继承人，当至少可以去当Identity主管（用这个世界的话说就是做做人事管理，hr），毕竟偌大一个家族的人都需要管理。
      3. 类（属性，伪类）选择器[0.0.1.0]
         就是在第3位标志位加1
         1. 类选择器
            应用于对应class的元素，css中用“.”后跟class名来标记。
            .header{
             display:none;
            }
            <div class=”header“></div>
            三儿子权利更小，分配去当家族采购主管了，肥水不流外人田吗。
         2. 属性选择器
            属性选择器应用于对应class的元素，css中用“[]”标记中html元素属性名来标记。
            div[title]{
             display:none;
            }
            <div title=”any”></div>
            地位越高，他的直系下属地位也比一般人高。
            俗话说：天高皇帝远，县官不如现管。怕就怕他的狗奴才仗势欺人狐假虎威。
         3. 伪类选择器
            LVHA伪类,样式按LVHA优先级顺序从右至左覆盖。所以要注意一下这4个伪类的声明顺序，不同的顺序会产生不同的效果。
            a:link - 默认链接样式
            a:visited - 已访问链接样式
            a:hover - 鼠标悬停样式
            a:active - 鼠标点击样式
            现在终于要说道真正的祸国殃民的牛鬼蛇神了，排名前4为的金牌打手了。要对付他们先从最弱的开始，柿子捡软的捏。
      4. 元素（伪元素）选择器[0.0.0.1]
         就是在第4位标志位加1
         1. 元素选择器
            应用于所有对应的html标签，css中直接使用html元素标记
            div{
             display:none;
            }
            <div></div><div></div>
         2. 伪元素选择器
            :first-letter - 首字母样式
            :first-line - 首行样式

         四儿子其实被排挤的不行了，每天就干一些表面的事情，小铺开张剪个彩啦，出席一些小应酬啦，浑浑噩噩的度过一生。

      5. 通配符选择器[0.0.0.0]
         就是在第4位标志位加0，不要小看这个0啊。
         应用于所有匹配的样式，类似模糊匹配，*号就是什么都可以啦。
         div *{
          display:none;
         }
         <div><div></div><span></span></div>
         这类人其实就是那些家族的旁支了，他们虽然对家族来说是渺小的，但是毕竟还有家族血缘，至少可以当当小掌柜。
         看看下面那些人就知道什么叫卑微了。
      6. 继承样式和结合符[无]
         这个连0都不是，简直就是什么都不是，不是东西啦。
         1. 继承样式
            p会继承div设置的样式，但没有权重，任何方式给p定义的样式都可以轻易覆盖继承样式
            div{
             color:red;
            }
            <div><p></p></div>
         2. 结合符（combinator）
            1. 后代选择器（descendant selector/上下文选择器contextual selector）
               后代结合符（descendant combinator）：空格
               空格前后的元素是后代关系。
               这么理解它呢？
               树结构的分支选择器。
               ……任何子孙中包含……（可一直嵌套下去，如：div p span）
               div span{
                display:none;
               }
               <div><p><span></span></p></div><span></span><div><em></em></div>
               空格的左右两边不一定是子元素这样的绝对父子关系；而是父亲和子孙关系，即可以隔N代遗传。
               如果有相似两代的话当然有两个选择最接近的一代。如：
               两层span，只匹配最接近div的那个span。
               div span{
                display:none;
               }
               <div><p><span><h1><span></span></h1></span></p></div>
            2. 子（元素）选择器（child selector）
               子结合符：大于号（child combinator）
               大于前后的元素必须是父子关系。
               div > span {
                display:none;
               }
               <div><span></span></div><div><em><span></span></em></div>
            3. 相邻兄弟选择器（adjacentsibling selector）
               相邻兄弟结合符（adjacentsibling combinator）：加号
               大于前后的元素必须是同级兄弟关系。
               li + li{
                display:none;
               }
               <ol><li></li><li></li><li></li></ol>

         这些就是要多少就可以雇佣多少的帮工了，他们没有只管工作，没有什么权利。

   2. 读者正常声明
3. 用户代理（User agent）[5]声明
   一般指游览器。如：
   游览器对a元素有默认声明，为蓝色加下划线。

—————————
[1], [3] 名称来自《CSS权威指南》
[2], [4] 名称来自 W3C 中文版
[5] 访问web内容的软件，包括桌面图像浏览器，文字浏览器，语音浏览器，移动电话，多媒体播放器，插件程序，以及一些用来与浏览器联结的软件辅助技术，比如屏幕阅读器，屏幕放大器，语音识别软件等。
[6] W3C CSS标准英文官方网站
[7] 原创作者：fangle，
[8] 原文链接：http://www.28star.com/blog/2008/06/06/css-priority.html

Tags：cascading style sheets, css, html, style.
评论数量(
Fatal error: Call to undefined function comments_only_number() in /home/.wyatt/fangle/28star.com/blog/wp-content/themes/iblue/single.php on line 14