一.标签选择器
1. 前面在main.css中定义的<div><em>等选择器，称为标签选择器，此种选择器影响范围大，不能精确控制
特殊的为星号选择器，匹配所有标签，性能上有问题，慎用
*{
margin:0;
padding:0；
}
二. id选择器
每个标签元素都有唯一的ID名，每次只作用于一个标签，不常用
main.css中写入
div{
color:red;
}
#div2{
color:blue;
}
原网页上<div>标签如下
<body>
<div>这是第一个div</div>
<div id="div2">这是第二个div</div>
</body>
效果：第一个div为红色，第二个div为蓝色，层叠样式表的效果
三. 类选择器
可用于多个标签元素中，一个标签元素上也可使用多个类，常用。
例子1：一个类用于多个标签元素
main.css中内容为
.red{
color:red;
}
#box{
color:green;
}
网页中代码为
<body>
<div class="red">这个第一个div</div>
<div class="red">这是第二个div</div>
<div id="box" class="red">这是第三个div</div>
</body>
实际效果为，第一，二个div为红色，但是第三个div为绿色，原因是id选择器的权重比类选择器大
例子2：一个标签元素上使用多个类
main.css的样式内容如下
.red{
color:red;
}
.bold{
font-weight:bold;
}
.yahei{
font-family:'Microsoft Yahei';
}
网页中
<body>
<div class="red bold yahei">这是第一个div</div>
</body>
四. 层级选择器
例子1
.duanluo{
text-indent:40px;
font-size:20px;
}
<p class="duanluo">
你好，我叫韩妹妹，我的专业是<em>软件工程</em>
</p>
<p>
你好，我叫李磊，我的专业是<em>美术</em>
</ p>
如果只想第一个段落中的<em>标签内容不倾斜，且改变颜色，需要用到层级选择器
.duanluo em{
font-style:normal;
color:pink;
}
例子2，列表中使用,多个层级选择器
.list{
list-style:none； #把列表前面的默认点号去掉
}
.list li{
height:30px;
}
.list a{
text-decoration:none;
font-family:'Microsoft Yahei';
font-size:20px;
}
html网页中写入
<ul class="list">
<li><a href="">新闻1</a></li>
<li><a href="">新闻2</a></li>
<li><a href="">新闻3</a></li>
</ul>
五. 组选择器，作用是简化样式写法
例子1，如下
.box1{
font-size:14px;
text-indent:28px;
color:red;
}
.box2{
font-size:14px;
text-indent:28px;
color:blue;
}
.box3{
font-size:14px;
text-indent:28px;
color:yellow;
}
<body>
<div class="box1">文字001</div>
<div class="box2">文字002</div>
<div class="box3">文字003</div>
</body>
上面三个类选择器除了颜色不同，其他都相同，可以用组选择器来简写，相同的样式写在一起，类名用逗号隔开，不同的样式单独写。
.box1,.box2,.box3{
font-size:14px;
text-indent:28px;
}
.box1{
color:red;
}
.box2{
color:blue;
}
.box3{
color:yellow;
}
六. 伪类及伪元素选择器
常用的伪类选择器有hover，可用在所有标签上，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，他们可通过样式在元素中插入内容
例子1，使鼠标停在链接标签<a>文字上时，文字变色
.list a{
text-decoration:none;
color:gray;
}
.list a:hover{
color:blue;
}
例子2，使所有段落标签<p>中的文字，鼠标经过时都变色
p:hover{
color:red
}
例子3，在指定文字前面或者后面，自动加上想加的文字
.box1{
color:red;
}
box2{
color:green;
}
.box1:before{
content:"在前面的文字 ";
color:blue;
}
.box2:after{
content:" 在后面的文字";
color:blue;
}
<body>
<div class="box1">文字001</div>
<div class="box2">文字002</div>
</body>
效果就是页面显示：
在前面的文字 文字001
文字002 在后面的文字