所谓选择器，指的是选择施加样式
3.1元素选择器
用标签名作为选择器，选中所相应的元素
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div{
font-size: 24px;
color: blue;
}
p{
font-size: 36px;
color: red;
}
</style>
</head>
<body>
<div>元素选择器</div>
<p>元素选择器1</p>
<p>元素选择器2</p>
</body>3.2id选择器
根据id来选择元素，其样式定义形式为：
#idname{
…….
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
}
#div1{
width: 200px;
height: 200px;
background-color: red;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>3.3类选择器
根据class属性来选择元素，其样式定义为：
.classname{
……
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.even{
width: 200px;
height: 200px;
background-color: red;
}
.odd{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>从结果可以看出：.odd{…..}定义的样式会施加到所有class=”odd”的元素上，比如上例中的第一个和第三个<div>，当然也包括class=”odd”的<p>
3.4属性选择器
根据某个属性的特性来选择
（1）根据有无某属性来选择
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title]{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div >3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>从结果可以看出，所有具有title属性的元素都应用了红色背景色的样式。
（2）根据属性的值来选择
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title='div2']{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div >3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>从结果可以看出，只有第二个div应用了红色背景的样式，因为只有第二个div的title属性等于div2
title ~=’div’:选中属性值包含指定完整单词的元素,类似word中的全字匹配
title ^= ‘div’:选中title属性值以’div’开头的元素
title $= ‘div’:选中title属性值以’div’结尾的元素
title *= ‘div’:选中title属性值包含’div’的元素
3.5结构选择器
(1)后代选择器：可以选择一个元素的后代进行选择。
案例：
<style type="text/css">
.content a{
font-size: 30px;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.content a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>黑龙江省气象服务中心今天11时发布交通天气预报</h1>
<div class="content">
<p> 受冷涡影响，今天我省<span><a href="">东部</a></span>区域仍将有<a href="http//www.heilongjiangdu.com">雷阵雨天气</a>，降水的地方,提醒您注意做好防暑降温工作。</p>
<a href="http//www.heilongjiangdu.com">前往现场</a>
</div>
<a href="http//www.heilongjiangdu.com">查看原文</a>
</body>（2）子元素选择器：通过某元素选中直接后代元素。
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.content >a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>黑龙江省气象服务中心今天11时发布交通天气预报</h1>
<div class="content">
<p> 受冷涡影响，今天我省<span><a href="">东部</a></span>区域仍将有<a href="http//www.heilongjiangdu.com">雷阵雨天气</a>，降水的地方,提醒您注意做好防暑降温工作。</p>
<a href="http//www.heilongjiangdu.com">前往现场</a>
</div>
<a href="http//www.heilongjiangdu.com">查看原文</a>
</body>3.6并选择器
将相同的样式放在一起，类名直接用英文逗号分隔。
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.div1,.din2{
position: relative;
width: 100px;
height: 100px;
}
.div1{
border: 1px solid blue;
}
.din2{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">我是div1</div>
<div class="din2">我是div2</div>
</body>3.7通配符选择器
通配符选择器选中页面所有的标签（任何元素）
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h1>黑龙江省气象服务中心今天11时发布交通天气预报</h1>
<div class="content">
<p> 受冷涡影响，今天我省<span><a href="">东部</a></span>区域仍将有<a href="http//www.heilongjiangdu.com">雷阵雨天气</a>，降水的地方,提醒您注意做好防暑降温工作。</p>
<a href="http//www.heilongjiangdu.com">前往现场</a>
</div>
<a href="http//www.heilongjiangdu.com">查看原文</a>
</body>注意：通配符选择器对页面所有的的元素都会设置对应的样式，而是实际上呢，有很多元素默认是不带任何的样式的。
3.8兄弟选择器
（1）选中离自己最近的一个下一级元素。
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.go-to + a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>黑龙江省气象服务中心今天11时发布交通天气预报</h1>
<div class="content">
<a href="http//www.heilongjiangdu.com">前往现场0</a>
<a class="go-to" href="http//www.heilongjiangdu.com">前往现场1</a>
<a href="http//www.heilongjiangdu.com">前往现场2</a>
<a href="http//www.heilongjiangdu.com">前往现场3</a>
</div>
</body>（2）选中所有下一级元素。
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.go-to ~ a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>黑龙江省气象服务中心今天11时发布交通天气预报</h1>
<div class="content">
<a href="http//www.heilongjiangdu.com">前往现场0</a>
<a class="go-to" href="http//www.heilongjiangdu.com">前往现场1</a>
<a href="http//www.heilongjiangdu.com">前往现场2</a>
<a href="http//www.heilongjiangdu.com">前往现场3</a>
</div>
</body>3.9伪类、伪元素选择器
伪类：根据元素不同的状态，自动选择不同的样式。(伪类用于向某些选择器添加特殊的效果。)
伪元素：伪元素用于将特殊的效果添加到某些选择器。
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
（1）伪类选择器：
条件一、根据元素不同的状态，自动选择不同的样式。
或条件二、直接添加一个class，给这个class设定特殊的样式。
a:hover：鼠标划过的时候添加样式
a:active：被激活的时候添加样式
a:link：链接地址未被访问时候添加的状态
a:visited：链接地址点击之后添加颜色。必须设置href属性。
焦点
input：focus：拥有键盘输入获取焦点时候添加的样式。
（2）.伪元素选择器：
（2.1）需要设置特殊效果的内容放到元素（标签）里面span
（2.2）在添加一个class，对class设置特殊样式