1.什么是选择器？
每一条css样式声明由两部分组成，如下：
选择器{
样式;
}
在css中{}之前的部分就是”选择器”,”选择器”指明了{}中的”样式“的作用对象，也就是说该”样式“作用与网页中的哪些元素。
2.基础选择器
2.1标签选择器
标签选择器顾名思义就是html代码中的标签。我们之前学习的html、body、h系列的标签、p、div、img等等我们都可以使用标签选择器来设置对应的css样式属性。
比如我想把我写的文字的字体和颜色做一下改变，就需要这么做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a{
font-size: 14px;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<a>我爱编程，编程爱我，编程使我快乐！！</a>
</body>
</html>
2.2ID选择器
ID好比是每个人的身份证号一样，每个人都有身份证，并且身份证号是不一样的。在网页中所有的标签都可以设置id，并且id不能重复。
语法：
#ID选择器名称{
css样式代码;
}
例子：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程，编程爱我，编程使我快乐！！</a>
<a id="a1">我爱英语，英语爱我，英语使我快乐！！</a>
</body>
</html>
css：
#a1{
color: red;
font-weight:bold ;
}
2.3类选择器
类选择器跟id有点相似，任何的标签元素都可以添加类(class)，但是不同的是类是可以重复，有“归类”的概念，并且同一个标签中可以携带多个类，用空格隔开。
语法：
.类选择器名称{css样式代码;}
例子：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程，编程爱我，编程使我快乐！！</a>
<a id="a1">我爱英语，英语爱我，英语使我快乐！！<br></a>
<a class="bold samll">字体加粗，14px<br></a>
<a class="bold big">字体加粗，20px<br></a>
<a class="lighten small">字体变细，14px<br></a>
</body>
</html>
css：
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
3.高级选择器
3.1后代选择器
顾名思义，所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)。
语法：
div p{
css代码样式;
}
使用空格表示后代选择器，上面表示 div是父元素，而p是div的后代元素。
例子：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程，编程爱我，编程使我快乐！！</a>
<a id="a1">我爱英语，英语爱我，英语使我快乐！！<br></a>
<a class="bold samll">字体加粗，14px<br></a>
<a class="bold big">字体加粗，20px<br></a>
<a class="lighten small">字体变细，14px<br></a>
<div>
<p>厉害哦！！<br></p>
<p>还需要继续努力啊。。</p>
</div>
</body>
</html>
css：
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
div p{
color: purple;
font-size: 15px;
}
3.2子代选择器
子代，仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器。
语法:
div>p{css代码样式;}
例子：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程，编程爱我，编程使我快乐！！</a>
<a id="a1">我爱英语，英语爱我，英语使我快乐！！<br></a>
<a class="bold samll">字体加粗，14px<br></a>
<a class="bold big">字体加粗，20px<br></a>
<a class="lighten small">字体变细，14px<br></a>
<div>
<p>厉害哦！！<br></p>
<p>还需要继续努力啊。。</p>
<a>
<p>这个属于孙子的备份，不属于子代！！</p>
</a>
</div>
</body>
</html>
css：
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
div>p{
color: purple;
font-size: 20px;
}
3.3通用选择器
通用选择器是功能最强大的选择器，它使用一个*号来表示，它的作用是匹配html中所有标签元素。使用它，我们可以对网页进行重置样式，以按照产品需求来开发对应的网页。
对页面中所有的文本设置为红色。
*{
color:red;}
3.4组合选择器
当你想在html中为多个标签元素设置同一个样式时，我们可能会想到添加相同的类，但是如果网页中的这样的标签非常多呢？是不是添加相同的类名，又成了我们累加的工作。不易于效率开发。那么我们可以使用组合选择器来选择，语法如下：
h1,h2,h3{
font-size: 20px;
font-weight: bold;
}
例子：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程，编程爱我，编程使我快乐！！</a>
<a id="a1">我爱英语，英语爱我，英语使我快乐！！<br></a>
<a class="bold samll">字体加粗，14px<br></a>
<a class="bold big">字体加粗，20px<br></a>
<a class="lighten small">字体变细，14px<br></a>
<div>
<p>厉害哦！！<br></p>
<p>还需要继续努力啊。。</p>
<a>
<p>这个属于孙子的备份，不属于子代！！</p>
</a>
</div>
<h2>字体加粗，20px</h2>
<h1>字体加粗，20px</h1>
<h3>字体加粗，20px</h3>
</body>
</html>
css：
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
div>p{
color: purple;
font-size: 20px;
}
h1,h2,h3{
font-size: 20px;
font-weight: bold;
}
3.5伪类选择器
更有趣的是伪类选择器，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色。
例子：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="教程.css">
</head>
<body>
<a>我爱编程，编程爱我，编程使我快乐！！</a>
<a id="a1">我爱英语，英语爱我，英语使我快乐！！<br></a>
<a class="bold samll">字体加粗，14px<br></a>
<a class="bold big">字体加粗，20px<br></a>
<a class="lighten small">字体变细，14px<br></a>
<div>
<p>厉害哦！！<br></p>
<p>还需要继续努力啊。。</p>
<a>
<p>这个属于孙子的备份，不属于子代！！</p>
</a>
</div>
<h2>字体加粗，20px</h2>
<h1>字体加粗，20px</h1>
<h3>字体加粗，20px</h3>
<a href="#">百度一下！</a>
</body>
</html>
css：
#a1{
color: red;
font-weight:bold ;
}
.bold{
font-weight: bold;
}
.small{
font-size:14px
}
.big{
font-size: 20px;
}
div>p{
color: purple;
font-size: 20px;
}
h1,h2,h3{
font-size: 20px;
font-weight: bold;
}
/*没有被访问过a标签的样式*/
a:link {
color: green;
}
/*访问过后a标签的样式*/
a:visited {
color: purple;
}
/*鼠标悬浮时a标签的样式*/
a:hover {
color: red;
}
/*鼠标摁住的时候a标签的样式*/
a:active {
color: blue;
}