学习目标
熟悉并掌握选择器的分类
什么是选择器
每条 css 样式声明（定义）由两部分组成，如下形式：
选择器{
样式;
}“选择器”指明了“ {} ”中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
选择器分类
1. 标签选择器
标签中的选择器就是 html 代码中的标签，如
<html>、<body>、<h1>、<p>、<img> 等。如下代码所示：
p{font-size:12px;line-height:1.6em;}上面 css 样式代码的作用：为 p 标签设置 12px 字号，行间距设置 1.6em 的样式。
2. 类选择器
语法如下
.类选器名称{css样式代码;}使用方法
2.1 使用合适的标签把要修饰的内容标记起来，如下所示：
<span>胆小如鼠</span>2.2 使用 class="类选择器名称" 为标签设置一个类，如下所示：
<span class="stress">胆小如鼠</span>2.3 设置类选择器 css 样式，如下所示：
.stress{color:red;}/*类前面要加入一个英文圆点*/3. ID选择器
在很多方面，ID 选择器都类似于类选择器，但也有一些重要区别：
3.1 为标签设置 id="ID名称"，而不是 class="类名称"；
3.2 ID 选择符的前面是井号（#）号，而不是英文圆点（.）；
3.3 ID 选择器只能在文档中使用一次，而且仅一次，而类选择器可以使用多次；
<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>3.4 可以使用类选择器词列表方法为一个元素同时设置多个样式，而 ID 选择器是不可以的，不能使用 ID 词列表。如下所示：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。
4. 子选择器
就是大于符号(>)，用于选择指定标签元素的第一代子元素。如下所示：
.food>li{border:1px solid red;}这行代码会使 class 名为 food 下的子元素 li 加入红色实线边框。
5. 包含(后代)选择器
就是加入空格，用于选择指定标签元素下的后辈元素，如下所示：
.first span{color:red;}注意
这个选择器与子选择器的区别，子选择器仅是指它的直接后代，或者可以理解为作用于子元素的第一代后代，而后代选择器是作用于所有子后代元素。
6. 通用选择器
它的作用是匹配 html 中所有标签元素。如下所示：
* {color:red;}7. 伪类选择符
它允许给 html 不存在的标签 （标签的某种状态）设置样式，如给 html 中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}目前可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了。:hover 可以放在任意的标签下，但它们的兼容性不是很好，所以常用的还是 a:hover 组合。
8. 分组选择符
当为了 html 中多个标签元素设置同一个样式时，可以使用分组选择符 (,)，如下所示：
h1,span{color:red;}它就相当于下面两行代码：
h1{color:red;}
span{color:red;}重要参考资料
8378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
