1.选择器概述
选择器是W3C在CSS工作草案中独立引入的一个概念。这些选择器基本上能够满足web设计师常规的设计需求。下面我来为大家讲解几种常用的选择器。
2.基础选择器
（1）元素选择器（标签选择器）：
最常见的CSS选择器是元素选择器，换句话说，文档的元素就是最基本的选择器。标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
<h3>标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<h3>html{color:red:}</h3>
<h3>h1{color:yello:}</h3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<!-- 嵌入式引入发 -->
<style type="text/css">
.item1{
height: 100px;
width: 100px;
background-color: red;
}
/* 作用于同一个标签的类选择器 */
.item2{
border: 2px solid blue;
}
</style>
</head>
<body>
<!-- 同一个标签可以使用多个类选择器 -->
<div class="item1 item2"></div>
<!-- 类选择器可以复用 -->
<div class="item1"></div>
</body>
</html>
（2）类选择器：
类选择器允许以一种独立于文档元素的方式来指定样式。类选择器可以单独使用，也可以与其他元素结合使用。在类选择器前面加个 .
在使用类选择器之前，需要修改具体的文档标签，以便类选择器正常工作。为了将类选择器与元素关联，必须为class属性指定一个适当的值。案例如下
<h3>< p class="red">我是红色< /p></h3>
（3）ID选择器：
在某些方面,ID选择器类似于类选择器，不过也有些重要差别。W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜 id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。
第一个区别是ID选择器前面有一个“#”号，也称为棋盘号或井号。规则如下：
<!DOCTYPE html>
< html lang="en">
< head>
< meta charset="UTF-8">
< title>id选择器</title>
< style type="text/css">
#css1{
height: 200px;
width: 200px;
background-color: blue;
}
< /style>
< /head>
< body>
< div id="css1">< /div>
< /body>
< /html>
（4）属性选择器：
在html中，通过各式各样的属性，可以给元素增加很多的附加信息。例如，通过 height 属性，可以指定 div 元素的宽度：通过id属性，可以将不同的div元素进行区分，并通过js来控制这个div元素的内容和状态。
< div id="mr1">编程图书< /div>
<style type="text/css">
#mr1{background:red}
</style>
3.其他选择器
（1）后代选择器
后代选择器又称为包含选择器，它可以作为某元素后代的元素。 我们可以通过定义后代选择器来创建一些规则，这些规则在某些文档结构中起作用，而在另一些文档结构中不起作用。
eg：如果只希望将h1元素后代em元素的文本变成红色，而不改变其他em元素里文本的颜色，则可以这样写：
h1 em{color:red;}
<h1><em>我变红色</em></h1>
<p><em>我不变色</em></p>
（2）子代选择器
如果你不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，那么请使用子代选择器。
eg：只想选择h1元素的子元素strong，则可以这样写：
h1>strong{color:red;}
这样规则会把第一个h1下面的strong变成红色，而第二个h1中的strong不受影响。
<h1><strong>我变红色</strong></h1>
<h1><em><strong>我不变色</strong></em></h1>
（3）相邻兄弟元素选择器
相邻兄弟元素选择器可选择紧接在零一元素后的元素，且二者有相同的父元素。相邻兄弟元素选择器使用"+"作为结合符。 eg：要将紧接在h1元素后出现的段落变为黄色，则可以这样写：
h1+p{color:yellow;}
4.伪类选择器
（1）伪类选择器
伪类选择器分为：（链接伪类选择器、结构伪类选择器、目标伪类选择器） 链接伪类选择器：顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active，a:link表示的是未访问的链接，a:visited表示已访问的链接 ，a:hover表示鼠标移动到链接上，a:active表示的是选定的链接（当我们点击别松开鼠标，显示的状态）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
a:link {
font-size: 16px;
color: gray;
font-weight: 700;
}
a:visited {
font-size: 16px;
color: orange;
font-weight: 700;
}
a:hover {
font-size: 16px;
color: red;
font-weight: 700;
}
a:active {
font-size: 16px;
color: green;
font-weight: 700;
}
</style>
</head>
<body>
<div>
<a href="#" >房间里面是一具已经腐烂的尸体，腐臭让人难以接受。</a>
<a href="#" >办案的刑警正在仔细地收集者证据。</a>
</div>
</body>
</html>
