div+css教程_简述CSS Selector的优先级_div+css教程_H5之家

div+css教程_简述CSS Selector的优先级

div+css视频教程共三课,57集。由“教程网” 精心打造,每个知识点都对应着实例进行贯通巩固，并提供了对应实例的源码示例下载，及作业的讲解视频，老师答疑等;
视频教程内容主要包括：web,Css语法基础及代码瘦身,div+css布局实例讲解,xml+css布局的讲解等。

课程总目标课程目标 Web标准概论

Web标准中标记应用思路检测网站符合web标准学习div+css的相关学习工具

xhtml语法及与html区别 div标签 Dreamweaver中css的使用

新建CSS规则面板的介绍 css类型面板介绍 css背景面板介绍

css区块面板介绍 css方框面板介绍 css边框面板介绍

css列表面板介绍 Div+css布局流程 Div+css布局实例操作-切片

布局实例操作-定义布局层布局实例操作-逐步定义每个层(body) 布局实例操作-逐步定义每个层(top)

布局实例操作-逐步定义每个层(contents) 布局实例操作-逐步定义每个层(left) 布局实例操作-逐步定义每个层(foot)

布局实例操作-逐步定义每个层(left) 布局实例操作-逐步定义每个层(main) 布局实例操作-逐步定义每个层(right)

定义全文文字样式定义指定层里文字样式(使文字垂直居中) 定义标题样式(h1,h2,h3,h4)等

定义全页链接样式定义指定层里链接样式定义ul的项目符号

导航栏设置1 导航栏设置2

我们来介绍一下CSS Selector的优先级。本文主要是围绕“11个class与1个id”的话题展开的，简单的来说就是这样的，一个拥有id名和class名的div被十个div包含着，然后样式是：

.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;}
#b{color:green;}

HTML结构比较长，如下：

<div class="a1"><div class="a2"><div class="a3"><div class="a4"><div class="a5"><div class="a6"><div class="a7"><div class="a8"><div class="a9"><div class="a10">
    <div class="a11" id="b">
     CSS Selector的优先级
    </div>
</div></div></div></div></div></div></div></div></div></div>

按照以往的理解，都说css中的class是10，id是100，然后脑袋中很自然地就想到，11个class的话，那么不就是110了嘛。这样就一定会比id要大了，最终的颜色应该是红色，但其实不然，最终的颜色是绿色，是那个id的颜色。

当时看到这个我表示十分纳闷，然后看文中的介绍又是一头雾水，后来经过组内同事指导以及个人心中对自我很严重的BS之后，终于明白了为什么会这样。其实当时在看一些书籍的时候，其中介绍到的那些1和0组成的数字，其实仅仅只是1和0而已，并不是1000、100、10、1之类。

css selector

在图中可以看到，一个id选择符时是0,1,0,0，然后两个id的选择符则是0,2,0,0，以此类推，每增加一个id选择符的话，那么就是代表左起第二个数字会递增，仅仅只是这个数字在增加而已。同理，使用class的选择符也是一样的。那么回到前面提到的“11个class与1个id”的问题，用这样的方式计算结果就是：

1个id时：0,1,0,0

11个class时：0,0,11,0

显然，这个问题中id的样式肯定会出现，而class的样式不会出现。紧记这次的教训，以后多花点时间去看老外的文章，以及去巩固和更好地掌握基础知识。这一年来，心态上一直都在迷失着，太随性了。目标和方向经常被自己遗忘，经常经历这样的事情对个人而言是好事，可以很清晰地看到自己的不足，然后进行弥补！

.a1 .a2 .a3 .a4 .a5 .a6 .a7 .a8 .a9 .a10 .a11{color:red;}
#b{color:green;}