选择器

选择器的类别
1.元素选择器；
2.通配选择器；
3.类选择器；
4.ID选择器；
5.属性选择器；
6.后代选择器；
7.伪类和伪元素。

元素选择器

故名思意，元素选择器就是直接用文档结构中元素名称来指定修饰对象的选择器。如p,span,div等等。

通配选择器

其实就是 * 。

类选择器

就是class选择器，为现今最常用的选择器。当对文档结构层级较为负责的文档使用使用类选择器的时候，我们常常会把多个类选择器配合使用，简称多类选择器。
<p class="urgent warning">this is a p project.</p>
<p>with plutonium,<span class="warning">this is a span.</span></p>
.warning {font-weight:bold;}
.urgent {font-style:italic;}
.warning.urgent {background:silver;}
如上第三种写法，当一个元素的class属性同时拥有warning和urgent两个值时，修饰才会有效果（不分先后），注意，如果第一个P元素还有第三个class值的时候，这种写法仍是有效的，也就是说，可以多，不可以少。另外，这种写法在IE7之前的版本中是不支持的，老版本的IE浏览器会选择最后一个给定值为检索值。

ID选择器

这个不用多说，与类选择器相似，但ID选择器具有唯一性。

属性选择器

h1[class] {color:silver;}
a[href][title] {font-weight:bold;}

如上，第一个会选取所有带有class属性的h1元素；
第二个则会选择有href属性同时还有title属性的a标签.
在属性选择器中，还可以根据部分属性值来进行选择。
<p class="urgent warning">this is a p</p>
p[class~="warning"] 以空格符为分隔的值包含warning的，等同于.warning。
p[class^="urg"] 选择class属性值以urg开头的所有P元素
p[class$="ing"] 选择class属性值以ing结尾的所有P元素
p[class*="ent"] 选择class属性值包含子串ent的所有P元素
还包括特定属性选择类型
<p lang="en">hello</p>
<p lang="en-us">greetings</p>
<p lang="en-au">G'day</p>
*[lang|=“en”]{color:white;}
这个规则会选择lang属性等于en或者以en-开头的所有元素。

后代选择器

这个就是根据文档元素之间的层级关系来进行选择。但要提一下的是几个特殊一些的> 后代选择器。

• 选择子元素使用“>”,如 h1 > strong{color:red;}
• 选择相邻兄弟元素使用“ + ” ，h1 + p{color:red;}

伪类和伪元素

CSS2.1中定义了2个静态的伪类( :link,:visited)跟3个动态的伪类 (:focus,:hover,:active)。其中静态伪类用于超链接，而动态伪类可用于任何元素。IE6之前只允许动态伪类选择超链接，IE7所有元素可以应用:hover,但不支持对表单元素应用:focus样式。

• 根据语言选择:lang()。
• 选择第一个子元素p:first-child{font-size:20px;} 。记住，这里的P是儿子不是爹
  伪元素选择器
• 设置首字母样式,例 p:first-letter{color:red;}
• 设置首行样式，例 p:first-line{color:purple;}
  以上两个伪元素在CSS2中只能作用于块级元素，CSS2.1中可以作用于所有元素，但还是有限制。
• 设置元素之前的样式，例 h2:before{content:"123";color:silver;}
• 设置元素之后的样式，例 h2:after{content:"456";}