很全的CSS选择器详解

3.css选择器

通过前面的一个分析，我们发现在一条css规则中，真正重要的有三个东西：
选择器、属性、属性值

CSS非常强大，其中的一个表现就是他提供了灵活好用的选择器。
作用：用于选中我们需要处理的标签或内容。

1.基本选择器

a.类型选择器：也叫标签选择器，或叫元素选择器。
元素是什么意思？
元素 = 标签 + 属性 + 内容

b.id选择器
要使用id选择器，需要分成两个步骤：
第一步，需要在对应的标签中增加一个id属性
第二步，需要在css中，使用#+id属性值

需要注意的细节：
id是一个通用属性，所有的标签都可以设置id属性
id通常是唯一的，所以不要在同一个页面中设置相同的id属性（尽管浏览器可以去解析）。
c.class选择器
class是班级的意思，在计算机领域中还可以理解为类、类别。

叫类选择器，使用也是分为两步：
第一步，需要在对应的标签中设置class属性，并设置对应值
第二步，在css的规则中，使用 .+class属性值

注意：对于class的使用
所有的标签都可以添加class属性
对于不同的标签，他们需要有相同的样式，此时使用class比较合适
对于相同的标签，但是在页面中，特别的多，我只需要某一部分标签有额外的样式，也应该使用class。
Class属性的值，可以有多个，如果有多个，使用空格隔开，

2.选择器用法

a.通配选择器
使用通配符，*，表示所有的标签（元素）。

实际上，统配选择器在开发时很少使用。
使用*来去掉所有标签的margin和padding。
b.分组选择器
在书写css的时候，有可能对两个不同的标签、class、id，设置相同的css。

在css中，使用逗号来实现分组。两个选择器之间使用逗号进行分隔。

再进一步：在实际开发时，有些元素有相同的样式，也有不同的样式，可以利用分组设置相同样式部分，然后再针对各个元素设置不同的样式，

c.后代选择器
肯定会涉及到标签的一个嵌套（包含）。

[友情提示]：不要把逗号和空格混淆。有逗号的表示是分组，有空格的才表示后代。

注意：后代的层次是没有限制的

d.伪类选择器
目前我们就掌握一个，最常用的，就是a标签的hover伪类。

hover，表示将鼠标放到a上面的这个状态。
a:hover

注意：
并不存在一个class=”hover”这么一个属性，所以才叫伪类。
对于hover，目前只需要掌握在a标签的用法就可以了

补充一个用法----组合
在使用class选择器的时候，可以将标签和class组合到一起，从而缩小范围。

如何理解：将二者拆分，一分为二，分为类型选择器p，和class选择器.red二者之间是并且的关系，及满足是p标签，同时又满足具class=‘red’这么一个条件,而且要注意，p.red不能写成.redp 或者.red p，它们都表示不同的含义。