CSS选择器

本文原创地址链接：http://blog.csdn.net/zhou_xiao_cheng/article/details/53179951，未经博主允许不得转载。
众所周知，HTML、CSS、 JavaScript并称为前端三剑客，CSS选择器在其中更是扮演了不可或缺的角色，所以说，学好这一部分，还是十分重要的。
CSS选择器比较多，在这里会介绍一些比较简单的，后面有时间再将剩下的补充完整。

1、通用选择器 *，匹配所有元素。使用例子：

* { width: 20px; }

2、类选择器.className,匹配类名为className的元素。使用例子：

.className { width: 20px; }

3、id选择器#idName,匹配id名为idName的元素。使用例子：

#idName { width: 20px; }

4、标签选择器tagName，匹配标签名为tagName的元素。使用例子：

div { width: 20px; }

5、子元素选择器A > B，匹配A元素下的子元素B。

div > span { width: 20px; }

6、后代元素选择器A B,两个元素间用空格隔开，匹配A元素下所有的元素B（包括A元素的孙子元素B和重孙元素B等）。使用例子：

div  span { width: 20px; }

7、多元素选择器A，B，...,每个元素间用逗号隔开，同时匹配A、B、…元素。使用例子：

div, p, span { width: 20px; }

8、选择器:first-child，匹配父元素的第一个子元素。需要注意的是，因为空格在选择器当中是有意义的，所以不要在冒号前随意加上空格。使用例子：

div:first-child { width: 20px; }

9、选择器:before,在被选择的元素的内容前面插入新内容，使用content属性来指定要插入的新内容，content属性不能省略，并可对新内容的样式进行设置。使用例子：

div:before { 
  content："Hello";
  font: 24px;
  background-color：blue;
}

10、选择器:after,在被选择的元素的内容后面插入新内容，使用content属性来指定要插入的新内容，content属性不能省略，并可对新内容的样式进行设置。使用例子：

div:after { 
  content："Hello";
  font: 24px;
  background-color：blue;
}

以上列举的这些选择器，都是可以组合使用的，有兴趣的可以进行相应的尝试。