《CSS3基本选择器》
<p class="sycode"> <p class="sycode"> 一、通配符选择器（＊） </p> <p class="sycode"> *{ </p> <p class="sycode"> marigin: 0; </p> <p class="sycode"> padding: 0; </p> <p class="sycode"> } </p> <p class="sycode"> </p> <p class="sycode"> 二、元素选择器(E) </p> <p class="sycode"> li {background-color: grey;color: orange;} </p> <p class="sycode"> </p> <p class="sycode"> 三、类选择器（.className） </p> <p class="sycode"> </p> <p class="sycode"> 四、id选择器（#ID） </p> <p class="sycode"> #first {background: lime;color: #000;} </p> <p class="sycode"> #last {background: #000;color: lime;} </p> <p class="sycode"> </p> <p class="sycode"> 五、后代选择器（Ｅ Ｆ） </p> <p class="sycode"> .demo li {color: blue;} </p> <p class="sycode"> </p> <p class="sycode"> 六、子元素选择器(E>F) </p> <p class="sycode"> ul > li {background: green;color: yellow;} </p> <p class="sycode"> </p> <p class="sycode"> 七、相邻兄弟元素选择器(E + F) </p> <p class="sycode"> li + li {background: green;color: yellow; border: 1px solid #ccc;} </p> <p class="sycode"> </p> <p class="sycode"> 八、通用兄弟选择器（Ｅ ? Ｆ） </p> <p class="sycode"> .active ~ li {background: green;color: yellow; border: 1px solid #ccc;} </p> <p class="sycode"> </p> <p class="sycode"> 九、群组选择器（selector1,selector2,...,selectorN） </p> <p class="sycode"> .first, .last {background: green;color: yellow; border: 1px solid #ccc;} </p> </p> 《CSS3属性选择器》
CSS3的属性选择器主要包括以下几种：
<p class="sycode"> <p class="sycode"> .demo a[href][title] {background: yellow; color:green;}//存在href 和title 被选中 </p> <p class="sycode"> .demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}//id="first"被选中 </p> </p>《CSS3伪类选择器》
1、这是最常用的动态伪类
<p class="sycode"> <p class="sycode"> .demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/ </p> <p class="sycode"> .demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/ </p> <p class="sycode"> .demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/ </p> <p class="sycode"> .demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/ </p> </p>2、UI元素状态伪类
":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用 ；
IE6-8不支持":checked",":enabled",":disabled"这三种选择器
3、:nth选择器
4、否定选择器（:not）
否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现
<p class="sycode"> <p class="sycode"> input:not([type="submit"]) {border: 1px solid red;} </p> </p>5、伪元素
CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。
那么我们简单了解一下他们的作用
::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个。
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用， 见过最多的就是清除浮动
<p class="sycode"> <p class="sycode"> .clearfix:before, </p> <p class="sycode"> .clearfix:after { </p> <p class="sycode"> content: "."; </p> <p class="sycode"> display: block; </p> <p class="sycode"> height: 0; </p> <p class="sycode"> visibility: hidden; </p> <p class="sycode"> } </p> <p class="sycode"> .clearfix:after {clear: both;} </p> <p class="sycode"> .clearfix {zoom: 1;} </p> </p>《CSS选择器优化》
固有效率：
