css选择器

要使用css对html页面中的元素实现一对一，一对多或者多对多的控制，这就需要用到css选择器。html页面中的元素就是通过css选择器进行控制的。

什么是css选择器：

每一条css样式定义由两部分组成：
[code]选择器{样式}
其中在[code]和{}中间的部分就是选择器。选择器指明了样式的作用对象。

类别选择器
类选择器工具类名来选择，前面用”.”来标志

.testClass{
  color:red;
}

在html中：

<div class='testClass'>

那么这个区域的字体颜色为红色。

标签选择器
标签选择器也称为元素选择器。一个完整的html页面有很多不同的标签组成，而标签选择器就是决定哪些标签采用相应的css样式。
eg：

p{
  font-size:16px;
}

那么html中所有p的标签的字体大小都是16px；

ID选择器
ID选择器可以为标有特定ID的html元素指定特定的样式。根据元素ID来选择元素，在html中，最好不要定义两个一样的ID，因为对js来说，只会选择具有相同id名字元素中的第一个。
写法例子：

.testID{
  color:red;
}

在html中：

<div id='testID'>

那么这个区域的字体颜色为红色。

后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个同个分开。后代选择器中的元素不仅仅只能有两个，对应多层祖先后代关系，可以有多个空格分开。
eg

<style>
.father .child{
color:red;
}
</style>
<p class="father">
黑色
<label class="child">红色
<b>也是红色</b>
</label>
</p>

伪类选择器
有时候需要用到文档以为的其他条件来应用元素的样式。比如鼠标悬停等。
1、静态伪类（只能应用与超链接）
：link 未访问
：visited 已访问
注意，visited伪类只能设置字体颜色、边框颜色、outline颜色的颜色。

2、动态伪类（可以应用于任何元素）
:focus 拥有焦点
:hover 鼠标停留
:active 正被点击

3、匹配锚点
:target 匹配锚点是的样式

4、UI元素伪类
注意（IE8-not support）
:enabled 可以用状态
:disabled 不可用状态
:checked 选中状态

5、语言属性
：lang 选择对应语言

6、结构伪类
注意（IE8-not support）
:first-child 父元素的第一个子元素
:last-child 父元素的最后一个子元素
:root 文档的根元素
:nth-child(n) 父元素的第n个子元素
:nth-last-child(n) 父元素的倒数第n个子元素
:nth-last-of-type(n) 父元素的具有指定类型的第n个子元素
:first-of-type 父元素中具有指定类型的第一个子元素。
:last-of-type 父元素中具有指定类型的最后一个子元素。
:only-child 父元素中只包含一个 子元素。
:only-of-type 父元素中只包含一个同类型的子元素
:empty 选择没有子元素的元素。

7、伪类的组合
a:visited:hover:last-child{color: red;}

通用选择器
使用*代表通用选择器，可以和如何元素匹配

*{color:red;}

群组选择器
当几个元素样式属性一致时，可以共同调用一个声明，元素之间用逗号隔开。

p, td, li {
color:red;
}

相邻同胞选择器
同胞之间，可以用+和~来表示其兄弟关系的元素。

h1 +p{
  color:bule;
}

属性选择器
属性选择器根据元素的属性及属性值来选择元素
1、简单属性选择器

*[title]{
  color:red;
}

2、具体属性选择器

*[class="xxx"]{
  color:red;
}

3、部分属性选择器

[class ^="b"] 选择class属性值以"b"开头的所有元素
[class $="b"] 选择class属性值以"b"结尾的所有元素
[class *="b"] 选择class属性值包含"b"的所有元素

css3

伪元素选择器

所有伪元素选择器必须放在出现在该伪元素选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器。（IE6 no support）
:first-letter 设置块元素首字母样式，行内元素转换成块严肃和行内块元素也支持。
:first-line 设置第一个文本行样式。
:before 设置之前的样式，可以插入生产的内容，并设置器样式。
:after 设置之后的样式