CSS常用选择器实践

CSS3选择器

1、标签选择器

顾名思义，标签选择器就是用标签名称作为选择器。

1.1、样例代码

1.2、效果图

1.3、说明

尽管标签选择器用起来很简便，但缺点也很明显。 1、在一个复杂的页面或构图中，一定会有很多同名标签，那么多个元素就会共享相同的样式，本来共享是好事，能节约代码量，但问题出在共享的粒度实在太粗了，可能经常会出现我们预料之外的效果。 2、我们希望代码尽量语义化，也就是让我们的代码读起来就像读自然语言一样，这样便于理解和维护，但标准的HTML标签名并不能体现具体的业务含义。

2、类选择器

类选择器是指为元素指定一个class属性，也称为样式类，然后在样式表中通过这个属性值来引用元素。在CSS中以.class-name的格式来选择对应的元素。

2.1、样例代码

2.2、效果图

2.3、说明

可以为每个元素起不同的类名来区分每个元素，如red、yellow和green，也可以为有共同属性的元素起相同的类名，如light，还可以为一个元素分配多个类名，多个类名间用空格分隔，如light red。

3、后代选择器

DOM结构是树状结构，也就是元素可以一层一层地嵌套，便于有条理地组织内容。相应地，对于内层元素的类选择器，为了提高可读性，我们应该让它体现出DOM的层次结构，按照“父类 子类”的格式来书写。

3.1、样例代码

3.2、效果图

3.3、说明

使用后代选择器，从技术上是为了避免选择到超出范围的元素，更重要的是，这样写能使语义更清晰，令CSS选择器与DOM结构保持同样的层级关系，例如.tree.branch .leaf就体现了“树干→树枝→树叶”这样的递进结构。

4、伪类选择器

伪类选择器用于选择处于特殊位置或状态的元素，例如选择一堆元素中的第1个或最后一个元素，或者隔一个选一个元素，或者选择处于鼠标指针悬停状态的元素。下面是其中几个常用的：

4.1、:first-child和:last-child

从名称一望即知，:first-child用于选择第1个元素，:last-child用于选择最后一个元素。

4.2、:nth-child()

:nth-child()伪类较为广泛的用法是:nth-child(odd)和:nth-child(even)，其中:nth-child(odd)表示选择所有第奇数个元素，:nth-child(even)表示选择所有第偶数个元素。

4.3、:nth-child(an+b)

:nth-child()函数还可以接收一个形如an+b的表达式作为参数，其中a和b是整数，n是从0开始的自然数列，由此表达式得到的数列，即为被选中的元素的下标，元素的下标从1开始计算。

4.5、:not()

:not()伪类用于排除掉一些元素，例如:not(:first-child)表示排除掉第1个元素，:not(:nth-child(3))表示排除掉第3个元素。

以上样例是从100个数字中挑选出素数，把素数的背景设置为橙色。这里的选择器共有5行。前4行分别把数字2、3、5、7标明为素数。第5行很长，我们拆开看，它的第1部分是.prime-numbers div，意思是所有