一.标签选择器
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：一个类用于多个标签元素
<head>
<style type="text/css">
.red{
color:red;
}
#box{
color:green;
}
</style>
</head>
<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，如下，有2行文本，并且在专业"软件工程"和“美术”上设置了<em>标签，那么此时页面上这两个专业名都会倾斜
.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 在后面的文字
七. 做一个表格综合实例
<head>
<style type="text/css">
.goods_list{
600px;
height:200px;
border:1px solid #333 #定义表格边框属性
border-collapse:collapse; #使边框变成一条线的效果
}
.goods_list th,.goods_list td{
border:1px solid #333;
text-align:center; #设置文字居中
}
#表头加背景色
.goods_list th{
backgroupd-color:blue; #设置背景为蓝色
color:white; #设置表头字体颜色为白色
}
<table class="goods_list">
<tr>
<th>序号</th>
<th>名称</th>
<th>数量</th>
</tr>
<tr>
<td>1</td>
<td>苹果</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>梨子</td>
<td>500</td>
</tr>
</table>