使用CSS选择器可以指定将CSS样式应用到哪一个HTML元素，利用CSS中不同的选择器可以准确的选择需要的元素。

标签选择器

标签选择器通常是HTML标签。

ID选择器

ID选择器像是给元素起了一个唯一的“名字”， ``#id名` 来获取对应的元素，并为其 设置CSS样式。

类选择器

类选择器和ID选择器的唯一区别是:一个元素可以使用多个类选择器，但是只能使用一个ID选择器 我们可以通过.类名来使用类选择器。

一个元素可以同时使用多个类选择器，每个类选择器之间使用空格隔开，在demo1和demo2中都设置了背景颜色，但是background-color: #99CC66;会被background-color: #FFCC99;所覆盖，background-color: #99CC66;不会被应用在元素上。

在同一元素上使用多个类选择器，如果一个属性被声明多次，最终会生效的是距离被作用元素最近的那一个。

通配符选择器 *

使用通配符选择器*选择了所有的元素(h1、h2)并设置元素内文本颜色为#CC3333。

群组选择器

连接符: ,

CSS群组选择器，也称为多元素选择器，是用于同时选取多个元素的CSS选择器，它可以让你在一个CSS规则中一次选择多个元素，而不需要为每个元素编写单独的CSS规则。

下面先演示一个不使用群组选择器的示例:

需要给h1、h2、h3中的文本设置#CC3333颜色，给div设置背景颜色#CCCC99 在不使用群组选择器的情况下，代码出现了冗余，当需要设置CSS样式的元素多了之后就会变层一场灾难。

下面是使用群组选择器的示例:

可以很明显的看出，不使用群组选择器和使用群组选择器时两者之间代码量的差距。

子代选择器

连接符: >

示例中使用子代选择器选择了div下的所有子代h1并设置字体颜色，可以在浏览器中的效果可以看到，Hello的颜色变为了blue而World的颜色并没有发生改变，这是因为子代选择器只能选择到直接子元素，World并不是div的直接子元素，World是section元素的直接子元素是div的间接子元素。

后代选择器

连接符: 空格

继续拿子代选择器中的例子来说，后代选择器是把子代选择器中的 > 换成了空格，就变成了div h1{}这时Hello 和World的颜色都会变成 blue，因为不论是直接子代还是间接子代都算是后代。

通用兄弟选择器

连接符: ~

通用兄弟选择器是 CSS 选择器中用于选择与某个元素有相同父元素，并在该元素后面的所有兄弟元素。

比如说我们想要选择ul中某个li后面的所有li可以像下面这样使用通用兄弟选择器来实现。

我们使用通用兄弟选择器选中了.demo后面的所有li并未其字体设置了颜色，所以在浏览器中可以看到“来到”和“晴空的code”的颜色发生了变化而“通用兄弟选择器”和“欢迎”`的颜色并没有改变，因为并没有选中它们。

相邻兄弟选择器

连接符： +

刚才介绍了通用兄弟选择器，现在让我们来学习相邻兄弟选择器。

相邻兄弟选择器只会选择紧接在该元素后面的元素，而通用兄弟选择器会选择所有在该元素后面的兄弟元素，继续用通用兄弟选择器的示例。

和通用兄弟选择器的效果对比一下可以发现只有“来到”的颜色发生了改变，这正好是应证了了相邻兄弟选择器和通用兄弟选择器的不同之处:相邻兄弟选择器只会选择紧接在该元素后面的元素，而通用兄弟选择器会选择所有在该元素后面的兄弟元素。

伪类选择器

伪类可以分为两种:结构化伪类、UI伪类。

UI伪类

应用UI伪类最常见的地方非超链接(a)莫属，我们可以为超链接添加伪类，当用户鼠标悬停，或点击等情况时表现出一定的状态。

针对超链接的伪类有四种:link、visited、hover、active

• link:未访问的超链接，可以设置颜色、字体。

• visited:已访问的超链接，可以设置颜色。

• hover:鼠标移入时的状态。

• active：鼠标点击(点击没有释放)时的状态。

可以通过a:伪类的方式对a标签使用伪类。

在使用超链接伪类时，四者的顺序一定是:link、visited、hover、active 如果顺序错误，就会造成想要使用的伪类不起作用。

:focus伪类

当表单聚焦时添加状态。

#结构化伪类选择器

• :first-child：选择元素第一个子元素;

• last-child：选择元素的最后一个子元素;

• :nth-child(n)：选择元素的第n个子元素;

• :nth-last-child(n)：选择元素的倒数第n个子元素;

• :only-child：选择只有一个子元素的元素;

• :not(): 选择不匹配指定选择器的元素;

如果要求将ul的第一个li加一个背景色很多人会写下与上面相似的代码(我第一次就用错了)，上面的代码理解起来好像是对的，但实际上这个会选择所有的li元素，正确的代码应该是下方这样的。

我们需要选择的是ul下的li，而ul li:first-child就像是先把ul下的li全部选择出来，然后再对选择出来的li使用:first-chil进行筛选——选出第一个li。

下面将继续演示其余伪类选择器的使用：

下面单独演示:only-child和:not()伪类选择器:

尽管我们知道了:only-child的作用，但是刚开始使用还是容易犯下一些错误，上述代码的作用就是选择ul中的li，但是还有一个限制:ul li span:only-child中的span:only-child的意思是li元素中只有一个span元素，所以有背景颜色的会是一，而不是二。

:not()伪类选择器:

上述代码会给除了第一个li之外的li加上背景色，因为not(:first-child)选择的是不匹配:first-child的元素，而二和三不匹配:first-child。