上图展示了浏览器的渲染过程，那么css和html的结合是怎样的呢？答案是——选择器！1、选择器分为两类：标签选择器（*为特殊标签），可以是单个标签，也可以是多个上下文标签；属性选择器（id和class本质上也是属性）。1.1标签选择器1.1.1万能选择器*万能选择器大家应该不陌生，最常用的就是重置浏览器的默认样式。1.1.2单标签文档的标签是最基本的选择器，例如：html{color:black;}p{color:gray;}h2{color:silver;}单标签选择器可以并行使用,即单标签分组,例如:html,p,h2{color:black;}//同时选中html,p,h2这三个标签1.1.3Multi-labelmulti-labelselectors通常与html上下文有关。选择器，选择一个祖先的所有后代节点，如divp{…}子元素选择器，选择一个父元素的所有直接节点，只包含子元素，不包括孙子和后代，如div>p{…}Adjacentsiblingselector，选择一个元素紧邻的兄弟节点，如li+li{...}同代选择器，选择一个元素的所有兄弟节点，即具有相同祖先节点的兄弟节点（不需要相邻）,比如span~a{...}以上几种情况的组合应用（不要组合的太复杂，代码首先要注重可读性）典型应用：样式实现代码：ulli+li{border-top:1pxsolid#ccc;}1.2属性选择器1.2.1特例一：id选择器css选择器是根据html节点的特性设置的，id也是一个属性，但是是一个特殊的属性，每个html节点id不能重复。 是特殊常用的，所以给id选择器单独加一个“#”，本质上是一个属性选择器。下面两行代码的执行效果是完全一样的：#div1{border:1pxsolid#ccc;}div[id='div1']{border:1pxsolid#ccc;}1.2.2特例2：Theclass选择器class也是一个特殊的属性，之所以放在属性选择器下面，和上面说的id是一样的。1.2.3属性选择器属性选择器有两种情况：selectonlybyattributename:img[title]{...}//selectwithspecifictitleattributebyattributenameandattributevalue:input[type='text']{…}//选择type属性值为text的input2。伪类和伪元素上面提到了几种选择器类型，伪类和伪元素可以用于任何选择器。2.1伪类伪类分为UI伪类和结构伪类。2.1.1UI伪类常用的UI伪类实例：a:link{color:#FF0000}//未访问链接a:visited{color:#00FF00}//已访问链接a:hover{color:#FF00FF}//鼠标移动到链接a:active{color:#0000FF}//选中的链接input[type='text']:focus{}//获得鼠标焦点的输入框#title1:target{}//突出显示活动的HTML锚点2.1.2结构化伪类（低版本IE不支持）常用结构化伪类实例：tabletr:nth-child(even){}//eveneven,oddoddtabletr:nth-child(odd){}tabletr:nth-child(n){}//选择第n张表tr:first-child{}tabletr:last-child{}2.2伪元素伪元素很important:before和:after的概念比较常用：span:before{content:'Hello';/*或unicode编码形式*/color:red;/*你也可以定义添加内容的样式*/}span:after{content:'张';}Jerry显示结果：可以看出:before和:after可以用来在元素前后添加内容。应用场景：首先，添加一个小图标。例如第二个添加fontAwesome图标库，清除浮动。3、扩展选择器选择器本来就是css的一个规则，用来为css选择html节点。但是聪明的人类通过选择器在其他领域创造了伟大的作品。jQuery流行的根本原因是它的“查询”——基于css选择器的“查询”。所有浏览器现在都支持querySelectAll()方法。其实这就是W3C“抄袭”的jQuery的设计。zen-Codingjquery可以使用css选择器表达式从现有的html结构中选择匹配表达式的dom组，但??zen-coding恰恰相反——它可以根据css选择器表达式创建html节点。不得不佩服这些人的创造力。zen-Coding可以大大提高编码效率，不妨一试。
