一、CSS四种基础选择器
1、标签选择器
标签选择器特点：只要针对某个标签定义一次，那么整个页面的对应标签都会受到影响
<!DOCTYPE html>
<html>
<head>
<title>标签选择器</title>
<!-- 标签选择器:只要针对某个标签定义一次，那么整个页面的对应标签都会受到影响 -->
<style type="text/css">
h1{color:red;}
p{color:blue;}
</style>
</head>
<body>
<!-- 下面对应的标签都会受到标签选择器的控制 -->
<h1>极客学院</h1>
<p>web前端</p>
<h1>工程师</h1>
</body>
</html>
2、class选择器
class选择器，也称为类选择器，类名只能用英文和数字，数字不能作为开头
特点：同一种标签可以定义不同的类名，在head中根据类名进行标签控制，使得同一种标签只有在类名相同时才会受到影响，不会类名对应不同的选择器控制，如果一个控件需要两个class选择器来控制，那么格式为class=“classname1 classname2”，则表示受到两个class选择器控制，在head中用.classname定义css
<!DOCTYPE html>
<html>
<head>
<title>class选择器</title>
<!-- 对类名进行css控制，对应body中相同类名的控件进行控制 -->
<style type="text/css">
.title1{color: red;}
.title2{color: blue;}
.text{font-size: 50px;}
</style>
</head>
<body>
<!-- 利用class选择器，针对相同类名进行控制，而不是相同控件标签 -->
<h1 class="title1">极客学院</h1>
<!-- 利用多个class选择器进行控制 -->
<h1 class="title2 text">极客学院</h1>
</body>
</html>
3、id选择器
id选择器与class选择器非常相似，在head当中是使用#id值来定义css，但是id当中只能选择一个id选择器来控制标签，不能选择多个，如果需要多个选择器来控制，可以在一个标签当中同时使用id选择器和class选择器
<!DOCTYPE html>
<html>
<head>
<title>id选择器</title>
<!-- id选择器与class选择器很相似，但是写css时是用#id名称 -->
<style type="text/css">
#title{color: red;}
#title1{color: blue;}
.title1{font-size: 50px}
</style>
</head>
<body>
<!-- id选择器不能同时使用多个选择器来控制控件，只能用一个 -->
<div id="title">极客学院</div>
<!-- 需要多个选择器来控制标签，则可以利用id选择器与class选择器同时使用(名称相同也不影响) -->
<div id="title1" class="title1">极客学院</div>
</body>
</html>
4、通用选择器
通用选择器是对所有元素都可以进行控制（针对所有body标签进行控制）
<!DOCTYPE html>
<html>
<head>
<title>通用选择器</title>
<!-- 通用选择器:控制所有标签 -->
<style type="text/css">
*{color:red; font-size: 50px;}
</style>
</head>
<body>
<h1>极客学院</h1>
<h2>极客学院</h2>
<h3>极客学院</h3>
<h4>极客学院</h4>
<p>极客学院</p>
</body>
</html>
二、CSS两种复核选择器
1、后代选择器
后代选择器写法：父类+空格+子类{css控制}，就只会控制指定父类下的子类标签
对于div嵌套也可以利用后代选择器针对嵌套标签进行css控制，方便精确到某个标签上
<!DOCTYPE html>
<html>
<head>
<title>后代选择器</title>
<!-- 利用后代选择器进行控制:格式为父类+空格+子类{css} -->
<style type="text/css">
ul li{color: red;}
ol li{color: blue;}
.title .box{color: green; font-size: 50px;}
.top .inside{color: pink; font-size: 50px;}
</style>
</head>
<body>
<!-- 后代选择器用于列表 -->
<!-- 无序列表 -->
<ul>
<li>百度</li>
<li>爱奇艺</li>
<li>京东</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>腾讯</li>
<li>网易</li>
<li>金山</li>
</ol>
<hr>
<!-- 后代选择器对于div嵌套的使用 -->
<!-- 上面的css只会针对title下的box进行css控制 -->
<div class="title">
<div class="box">游民星空</div>
</div>
<div class="box">腾讯QQ</div>
<!-- 多层div使用后代选择器:格式仍然是父类+空格+子类标签 -->
<div class="top">
<div class="middle">
<div class="inside">多层div嵌套</div>
</div>
</div>
</body>
</html>
2、编组选择器
编组选择器即将多个css选择器统一制定为一种css控制
编组选择器写法：css选择器1，css选择器2，css选择器3{css控制}
每个css标签都是独立的个体（css标签可以是基础选择器、class选择器、id选择器、后代选择器）
<!DOCTYPE html>
<html>
<head>
<title>编组选择器</title>
<!-- 编组选择器，将多个css选择器统一编组并受同一css控制 -->
<style type="text/css">
h1,h2,h3,#jd,.title,.title1 .child{color:red; font-size: 50px}
</style>
</head>
<body>
<!-- 基础选择器控制 -->
<h1>腾讯</h1>
<h2>百度</h2>
<h3>知乎</h3>
<!-- id选择器控制 -->
<p id="jd">京东</p>
<!-- class选择器控制 -->
<div class="title">爱奇艺</div>
<!-- 后代选择器控制 -->
<div class="title1">
<div class="child">百度理财</div>
</div>
</body>
</html>
三、伪类选择器
伪类选择器不像id选择器、class选择器会立即生效，它是根据一些事件触发才会生效控制
下面介绍四种伪类选择器
1、link选择器
link选择器是设定页面初始样式，即刚打开页面时显示的样式
2、visited选择器
visited选择器是已访问后的样式
3、hover选择器
hover选择器是鼠标移入时的样式（用的非常多）
4、active选择器
active选择器是活动样式，即按下控件时显示的样式
需要注意的是：如果link、visited、hover、active四个伪类选择器都需要使用的话，那么一定要按照顺序来写，不然会导致部分伪类选择器失效，顺序是link、visited、hover、active，必须要按照这个顺序来写
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<style type="text/css">
/*初始样式:刚打开页面时显示的样式*/
a:link{color: red;}
/*访问后样式:已经访问后显示的样式*/
a:visited{color: green;}
/*鼠标移入时的样式:当鼠标移入指定控件时显示的样式*/
a:hover{color: pink;}
/*活动样式:即当按下控件时显示的样式*/
a:active{color: #000}
</style>
</head>
<body>
<a href="http://www.jikexueyuan.com">极客学院</a>
<a href="http://www.suningyigou.com">苏宁易购</a>
</body>
</html>
一般情况下，首先会先全局设定一个文本样式，然后再设定一个hover样式
伪类选择器针对所有的标签都可以使用，同样对任何选择器也可以使用
<!DOCTYPE html>
<html>
<head>
<title>一般的伪类选择器的用法</title>
<!-- 一般的伪类选择器的用法就是先全局设定一个统一标签的样式，然后再写一个hover选择器样式 -->
<style type="text/css">
/*设定全局初始样式*/
a{color: blue;}
/*设定鼠标移入时的样式*/
a:hover{color: pink;}
/*伪类选择器针对所有的标签都可以使用*/
h1{font-size: 40px}
h1:hover{font-size: 50px}
/*伪类选择器针对所有选择器也可以使用*/
/*id选择器*/
#title{color:green;}
#title:hover{color: pink;}
/*class选择器*/
.title1{color: green;}
.title1:hover{color: pink;}
/*后代选择器*/
.top .middle{color: green;}
.top .middle:hover{color: pink;}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度一下，你就知道</a>
<a href="http://www.jd.com">京东商城</a>
<h1>web前端</h1>
<div id="title">腾讯视频</div>
<div class="title1">天猫超市</div>
<div class="top">
<div class="middle">web前端学习</div>
</div>
</body>
</html>