1.元素选择器
作用：通过元素选择器，可以选择页面中的指定元素。
语法：标签名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<p>锄禾日当午</p>
</body>
</html>2.id选择器
作用:通过元素的id属性值，选中唯一的一个元素。
语法：#id属性值{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#p1{
color:red;
}
</style>
</head>
<body>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
</body>
</html>3.类选择器
作用：通过元素的class属性值选中一组元素
语法： .class属性值{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.p2{
color:greenyellow;
}
</style>
</head>
<body>
<p>锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
</body>
</html>- 可以为元素设置class属性。
- calss属性和id属性类似。只是class属性可以重复。
- 拥有相同class属性值的元素，我们说它们是一组元素。
- 可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。
<p class="p2 hello">happy new year</p>4.选择器分组(并集选择器)
作用：通过选择器分组可以同时选中多个选择器对应的元素。
语法： 选择器1，选择器2，选择器N{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#p1,.p2,h1{
background-color: yellow;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
</body>
</html>5.通配选择器
作用：可以用来选中页面中的所有元素
语法：*{}
*{
color:red;
}6.复合选择器（交集选择器）
作用： 可以选中同时满足多个选择器的元素
语法： 选择器1选择器2选择器N{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
* 为拥有class p3 的span元素设置背景颜色为黄色
*/
span.p3{
background-color: yellow;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p class="p3">锄禾日当午</p>
<span class="p3">锄禾日当午</span>
</body>
</html>注意：对于id选择器来说，不建议使用复合选择器。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。