002---选择器（标签选择器、类选择器、id选择器、伪类选择器、通配符选择器）

一、标签选择器

语法：（像p、div、hn....的标签）

标签选择器

效果展示：

                                

二、类选择器

顾名思义，class本身就有类的意思，这里表示具有相同class值的一类。

语法：

类选择器

.LEI {
	color: red;
}

效果展示：

                                 

一个class 的style样式可以被多个标签同时使用。

例如：

类选择器111
类选择器222

样式与上一样，那么效果呢：

                                  

效果是一样的。

注意：①使用类选择器设置样式的时候，类名前要有英语符号“.”。且命名要遵循命名原则。

          ②不要用纯数字、汉字命名，且尽量不要用“_”下划线，可以用“-”。

          ③尽可能有很好的可读性。

三、多类名选择器

一个标签如果同时具有多个类名，那么就会同时具有那些类名的样式。

例如：

多类名选择器

.LEI {
	color: red;
}
.F-size {
	font-size: 30px;
}

那么效果与上面的作比较：

四、id选择器

id选择器就像一个人的身份证号，只有一个。所以，id样式只能被一个标签所使用，即只能被使用一次。

语法：

ID

#big {
	color: orange;
	font-size: 100px;
}

效果如下：

五、通配符选择器

语法：

* {
	margin: 0;
	padding: 0;
}

通配符选择器对所有的标签都有用，，但是优先级较低，容易被覆盖。其中使用最多的就是消除标签外边距和内边距（清除浏览器的默认值，以便于自己设定自己所需要的）。

六、伪类选择器

1. 链接伪类选择器（只要针对于链接标签   a）

语法：

请点击

a {
	color: #000;
}
.aa:hover {
	color: red;
}

前面的a样式是给a标签一个最初的颜色，以便分辨。（鼠标经过前后对比）

                        

其他的类似。

但是，在定义样式的时候，要注重上下顺序，例如，如果hover在link的上面，那么hover的效果就不显示。

顺序：link、visited、hover、active

2. 结构位置伪类选择器（CSS3）

语法：

	
11111
	
11111
	
11111
	
11111

ul li {
	font-size: 30px;
	font-weight: bold;
}
ul li:first-child {
	color: red;
}
ul li:nth-child(2){
	color: orange;
}
ul li:nth-child(3){
	color: green;
}
ul li:last-child {
	color: purple;
}

效果展示：

注意事项：

① nth-child()括号里还可以写odd和even，分别表示奇数和偶数。例如：

ul li:nth-child(odd){
	color: green;
}

ul li:nth-child(even){
	color: orange;
}

② nth-child(kn+b)   k、b分别  系数和常数，如果k=2,b=0，那么选择的就是2的倍数；如果k=2,b=1，那么就是比2的倍数多1的数。

3. 目标伪类选择器