基础选择器
类选择器
声明定义： .类名｛属性1:属性值;属性2:属性值;｝
调用：<标签 class=”类名”>内容</标签>*
定义：
.orange {
color: orange;
}
.red {
color: red;
}
调用：
<span class="red">l</span>
<span class="orange">e</span>
多类名选择器
（表示多个类名同时调用并且能多次使用）
声明定义： .类名1｛属性1:属性值｝ .类名2｛属性2：属性值｝
调用：<标签 class=”类名1 类名2”>内容</标签>*
定义
.green{
color: green;
}
.font-size1{
font-size: 12px;
}
调用
<div class="green font-size1 ">卡特</div>
ID选择器
(id不能重复)
声明定义：
#类名1｛属性1:属性值｝
#类名2｛属性2:属性值｝
调用：<标签 id=”类名1”>内容</标签>
声明
#green{
color: green;
}
#font-size1{
font-size: 12px;
}
调用
<div id="green font-size1 ">卡特</div>
通配符选择器
*｛属性1:属性值;｝
链接伪类选择器
未访问的链接 a:link {属性1：属性值;}
已访问的链接 a:visited{属性1：属性值;}
鼠标经过链接 a:hover{属性1：属性值;}
选定的鼠标状态 a:active{属性1：属性值;}
声明定义
a:link {
font-size: 20px;
color: red;
font-weight:900;
}
a:visited {
font-size: 20px;
color: blue;
font-weight:900;
}
a:hover {
font-size: 20px;
color: green;
font-weight:900;
}
a:active {
font-size: 20px;
color: yellow;
font-weight:900;
}
调用
<a href="#">秒杀</a>
<a href="#">玄龟</a>
<a href="#">惊天</a>
<a href="#">变</a>
链接伪类选择器简写方式
/*实际工作中用的多*/
a{
font-size: 20px;
color: red;
font-weight:900;
}
a:active{
font-size: 20px;
color: green;
font-weight:900;
}
复合选择器
标准选择器(交集选择器)
标签选择器（类选择器）
定义
.g {
color: green;
}
p.g {
font-family:"微软雅黑";
}
调用
<p class="g">绿色且字体是微软雅黑</p>
并集选择器
div{
color: red;
}
p{
color: red;
}
span{
color: red;
}
并集选择器后：
div,
p,
sapn,
.py{
color:red;
}
调用
<h2 class="py">中学化学课本</h2>
后代选择器
定义
div p{
color: red;
}
.test p{
color: red;
}
调用
<div class="test">
<p>我是div的后代p，我会变红</p>
<p>我类标签test的后代p，我也会变红</p>
</div>
<p>我不是div的后代p标签，我不会变红</p>
子元素选择器
只选择亲儿子（一级列表）
定义
.nav >li{
color: red;
}
调用
<ul class="nav">
<li>1级列表 #变红
<ul>
<li>2级列表</li> #这一级不会被选择器渲染
</ul>
</li>
</ul>