你知道的与不知道的CSS3选择器
CSS选择器除了id还有class还有后代选择器，属性选择器等等,准确而简洁的运用CSS选择器会达到非常好的效果。我们不必通篇给每一个元素定义类（class）或ID，通过合适的组织，可以用最简单的方法实现同样的效果。
class 和 id 都可以使“单一选择符”有不同的样式
A1：二者主要的区别在哪里呢？
id你只能用来定义单一元素，定义二个以后。页面不会出现什么问题，但是W3检测的时候认为你页面不符合标准；class是类，同一个class可以定义多个元素。就页面效果而言，两个东西的视觉效果几乎无差别。
A2：id 选择符为什么要少用，它有有什么局限性？
单一使用的样式用id，需要程序、js动态控制的样式用id，id在页面只能使用一次！提供少用id，因为id可能和页面嵌的程序冲突（比如名称相同等）！
A3：我该在什么时候使用ID，什么时候使用class？
单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。
ID与CLASS使用归总起来一句话：ID是唯一的并是父级的，CLASS是可以重复的并是子级的。
一、在web标准中是不容许重复ID的，例如 div id=”a” 不容许重复2次；而class所定义的是类，理论上可以无限重复。以根据需要多次引用。
二、属性的优先级问题：ID 的优先级要高于class，我们在下面的代码中有示例说明。
三、方便JS等客户端脚本的引用，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单与快捷。
若同时应用多个class，后定义的优先（即近者优先），加上!important最优先！
CSS选择器，有些可能是你根本没有接触过的，有些可能你已经熟知。大家一起学习吧。
一、*（通配符选择器）
*通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。
Example Source Code [www.zikercn.com]margin: 0;
padding: 0;
}
也可以用*来匹配某一元素下的所有子元素：
Example Source Code [www.zikercn.com]border: 1px solid black;
}
二、#X （ID选择器）
#+id名，这是日常常用的css选择器，用于匹配id为XXX的元素，id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？
Example Source Code [www.zikercn.com]width: 960px;
margin: auto;
}
三、.X （类选择器）
.+class名，标准的样式选择器，与id选择器的区别是样式选择器可以选择多个元素。样式选择器是提倡使用的选择器，我想也是日常前端人员用到最多的选择器了。
Example Source Code [www.zikercn.com]color: red;
}
四、X Y （后代选择器）
Example Source Code [www.zikercn.comtext-decoration: none;
}
目前非常常用的css选择器，用于选取X元素下子元素Y，这里有个要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。
使用此子孙选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。
这种子孙选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。
五、X （标签选择器）
Example Source Code [www.zikercn.com]ul { margin-left: 0; }
标签选择器，优先级仅仅比*高，常用于css reset。
一、X:link X:visited X:hover X:active 伪类
Example Source Code [www.52css.com]a:visted { color: purple; }
伪类选择器，visted已被访问过的样式，hover鼠标经过的样式，link未被访问的样式。三种伪类选择器常用于链接，但不是说只适用于链接，可惜的是IE6只支持将这三种伪类选择器作用于链接。
这里明河说明一点，由于CSS优先级的关系(后面比前面的优先级高)，这几个伪类的书写顺序，一般是link、visted、hover、active。
二、X + Y 相邻选择器
Example Source Code [www.zikercn.com]color: red;
}
相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配一个元素)
三、X > Y 子选择器
子选择器，留意X > Y与X Y的区别，后者是子孙选择器，即无视层级，而X > Y是字选择器，只匹配X下的子元素Y。52CSS.com
从理论上来讲X > Y是值得提倡选择器，可惜IE6不支持。
四、X ~ Y 相邻选择器
Example Source Code [www.zikercn.com]color: red;
}
相邻选择器，与X+Y类似，不同的是X ~ Y匹配的是元素集合，比如上述代码，匹配的是所有ul相邻的p
五、X[title] 属性选择器
Example Source Code [www.zikercn.com]color: green;
}
属性选择器，比如上述代码匹配的是带有title属性的链接元素。
六、X[title=""] 另一种属性选择器
Example Source Code [www.zikercn.com]color:#096;
}
属性选择器，上述代码不只匹配带有title属性，更匹配title属性等于”我爱zikercn.com”的链接元素。[]内不只可用title属性，还可以使用其他属性。
七、X[title*=""] 模糊匹配属性选择器
Example Source Code [www.zikercn.com]color:#096;
}
加了*号，意味着是模糊匹配，比如上述代码，会匹配title属性为明或明河或明河共影等带有明字的链接属性。
八、X[title^=""] 另一种模糊匹配属性选择器
Example Source Code [www.zikercn.com]color:#096;
}
模糊匹配,与*的作用相反，^起到排除的作用，比如上述代码，会匹配title属性不带有明字的链接属性。
九、X[href$=""] 很实用的属性选择器
Example Source Code [www.zikercn.com]color: red;
}
在属性选择器中多一个$符号，用于匹配结尾为特定字符串的元素，比如上述代码匹配的就是href属性值的结尾为.png的链接。
十、X[data-*=""] 不太常用的属性选择器
Example Source Code [www.zikercn.com]color: red;
}
data-filetype这个属性目前用的实在不多，但有些场合非常好用。比如我要匹配所有的数据类型为图片的链接，如果使用X[href$=""]的方式如下：
Example Source Code [www.zikercn.com]a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
而使用data-filetype，只要：
Example Source Code [www.zikercn.com]color: red;
}
当然前提是你给每一个链接加上data-filetype属性。
十一、X[foo~=""] 非常少用的选择器
Example Source Code [www.zikercn.com]color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
这也是非常少用的选择器，加上~号，有一种情况特别适用，比如你有个data-filetype=”external image”属性，这时候我希望分别针对external和image样式控制。
Example Source Code [www.zikercn.com]color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
上述代码会匹配data-filetype=”external”、data-filetype=”image”、data-filetype=”external image”的a。
十二、X:checked 另一种伪类选择器
Example Source Code [www.zikercn.com]border: 1px solid black;
}
这个伪类选择器只用于匹配带有checked属性的元素，比如radio、checkbox即单选框和多选框。目前这个伪类选择器，IE9下都不支持，非IE浏览器基本上都支持。
学习下面的四种伪类，知则加深印象，不知则努力学之。
一、X:after
Example Source Code [www.zikercn.com]content: “”;
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
我想上面这段代码，很多朋友都非常熟悉，是清理浮动时常用的hack方法。:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影，点击这里查看。
二、X:hover
Example Source Code [www.zikercn.com]background: #e3e3e3;
}
hover在52CSS.com前面的文章中已经介绍过，IE6下只支持a的hover。
即使用border-bottom: 1px solid black; 要好于text-decoration: underline;
从实际的效果来看，使用border-bottom的距离比text-decoration来的合理，但使用border-bottom存在一些风险，比如颜色问题。
三、X:not(selector)
Example Source Code [www.zikercn.com]color: blue;
}
否定伪类选择器，这还是比较好理解的，上述将会把非id为container的div的字体颜色设置为蓝色。
:not伪类IE8并不支持，IE9已经支持了。
四、X::pseudoElement
Example Source Code [www.zikercn.com]font-weight: bold;
font-size: 1.2em;
}
::伪类，用于给元素的片段添加样式，这如何理解呢？比如你要让一个段落的第一行的文字加粗，那么这个选择器是不二之选。
除此之外，你还可以给第一个字加上特殊样式，这个应用还是非常常见的
Example Source Code [www.zikercn.com]
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
IE6居然支持！这足以让人惊喜……的欢唱！
子选择器
请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择，我们看下面的代码：
Example Source Code [www.zikercn.com]#links a {color:red;}
#links > a {color:blue;}
HTML：
<p id=”links”>
<a href=”http://www.zikercn.com/”>Div+CSS教程</a>>
<a href=”http://www.zikercn.com/”>CSS布局实例</a>
<a href=”http://www.zikercn.com/”>CSS2.0教程</a>
</p>
我们将会看到第一个链接元素“Div+CSS教程”会显示成蓝色，而其它两个元素会显示成红色。当然，或许你的浏览器并不支持这样的CSS选择符。我们在一开始也强调了不太兼容的现状。
相邻同胞选择器
我们除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。看下面的代码：
Example Source Code [www.zikercn.com]h1 + p {color:blue}
HTML
<h1>zikercn.com是一个非常专业的CSS站点</h1>
<p>在zikercn.com的Div+CSS教程中，介绍了很多关于CSS网页布局的知识。</p>
<p>在zikercn.com的CSS布局实例中，有很多与CSS布局有关的案例。</p>
一、标签选择器：
顾名思议，标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。如：
Example Source Code [www.zikercn.com]
em { color:blue;}
dl { float:left; margin-top:10px;}
二、id选择器：
我们通常给页面元素定义id。例如定义一个层 <div id=”menubar”></div> 然后在样式表里这样定义：
Example Source Code [www.zikercn.com]margin:0 auto;
background:#ccc;
color:#c00;
}
其中”menubar”是你自己定义的id名称。注意在前面加”#”号。
id选择器也同样支持后代选择器，例如： #menubar p { text-align:center; line-height:20px;; } 这个方法主要用来定义层和那些比较复杂，有多个“唯一后代”的元素。
三、类（class）选择器：
在CSS里用一个点开头表示类别选择器定义，例如：
Example Source Code [www.zikercn.com]color:#f60;
font-size:14px ;
}
在页面中，用class=”类别名”的方法调用： <span class=”da1″>14px大小的字体</span> 这个方法比较简单灵活，可以随时根据页面需要新建和删除。但需要避免多class综合症。
四、群组选择器：
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
Example Source Code [www.zikercn.com]line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.www_zikercn_com,#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}
使用组群选择器，将会大大的减化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率与CSS文件体积。
五、后代选择器：
后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式，例如这样：
Example Source Code [www.zikercn.com]font-style:italic;
font-weight:800;
color:#f00;
}
#main p {
color:#000;
line-height:26px;
}
#sider .con span {
color:#000;
line-height:26px;
}
.www_52css_com p span {
color:#f60;
}
#sider ul li.subnav1 {
margin-top:5px;
}
第一段，就是给li下面的子元素strong定义一个斜体加粗而且套红的样式。其他以此类推。
后代选择器的使用是非常有益的，如果父元素内包括的HTML元素具有唯一性，则不必给内部元素再指定class或id，直接应用此选择器即可，例如下面的h3与ul就不必指定class或id。
Example Source Code [www.zikercn.com]<h3></h3>
<ul>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
在这里CSS就可以及样写：
Example Source Code [www.zikercn.com]#sider ul {…}
#sider ul li {…}
结合使用上面的四种CSS选择器，基本满足了CSS布局的需要，主要在于灵活的使用，特别是后代选择器的使用能大大的简化HTML文档，使HTML做到结构化明确，最小的代码实现同样的效果。
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active。
例如：
Example Source Code [www.zikercn.com]a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上语句分别定义了”链接、已访问过的链接、鼠标停在上方时、点下鼠标时”的样式。注意，必须按以上顺序写，否则显示可能和你预期的不一致。记住它们的顺序是“LVHA”。
CSS3结构性伪类选择器
一、X:nth-child(n)
Example Source Code [www.zikercn.com]color: red;
}
接下来的几个伪类选择器使用上非常类似，功能也比较接近。
:nth-child(n)，用于匹配索引值为n的子元素。索引值从1开始。
X:nth-child()用法实际上有三种变化，demo的用法是最简单的，X:nth-child()更强大的用处在于奇偶匹配，明河不展开讲，有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》
二、X:nth-last-child(n)
Example Source Code [www.zikercn.com]color: red;
}
:nth-child(n)，是从第一个开始算索引，而X:nth-last-child(n)是从最后一个开始算索引。
三、X:nth-of-type(n)
Example Source Code [www.zikercn.com]border: 1px solid black;
}
nth-of-type与nth-child的效果是惊人的相似，想要更多的了解nth-of-type请看《Alternative for :nth-of-type() and :nth-child()》，:nth-of-type(N)
四、X:nth-last-of-type(n)
Example Source Code [www.zikercn.com]border: 1px solid black;
}
:nth-last-child效果相似。
五、X:first-child
Example Source Code [www.zikercn.com]border-top: none;
}
匹配子集的第一个元素。IE7就可以支持了，这个伪类还是非常有用的。
六、X:last-child
Example Source Code [www.zikercn.com]color: green;
}
与:first-child效果相反
留意IE8支持:first-child,但不支持:last-child。
七、X:only-child
Example Source Code [www.zikercn.com]
color: red;
}
这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
八、X:only-of-type
Example Source Code [www.zikercn.com]font-weight: bold;
}
与:only-child类似。
九、X:first-of-type
Example Source Code [www.zikercn.com]font-weight: bold;
}
等价于:nth-of-type(1)，匹配集合元素中的第一个元素。