一、四大基本选择器
1、统配选择器（*）：匹配页面中的所有元素。
*{
}
例：页面中所有的元素都变成红色，背景是绿色
*{
color:red;
background-color: darkseagreen;
}
如图：
2、标签选择器：通过标签来匹配元素
标签名{
}
例：
p标签：字体颜色黑色，字体大小50像素
div标签：高度和宽度都是100像素，颜色为#6495ED
p{
color: black;
font-size: 50px;
}
div{
width: 100px;
height: 100px;
background: #6495ED;
}
运行效果如图：
3、类选择器：匹配具备class属性的元素
class=“类名”
.类名{}
例：
给一个div添加class属性
<div class="div1">
我是小妖怪，逍遥又自在
</div>
使用类选择器，选择div这个元素，调整样式
.div1{
height: 100px;
color: crimson;
}
运行效果如图所示：
4、id选择器：匹配具备id属性的元素（具备唯一性：id名不可重复，类似于身份证号）
id=“id值”
#id{
}
例：
给div添加id属性：
<div id="div2">
id选择器
</div>
通过id选择div3调整样式：
#div2{
height: 100px;
color: aquamarine;
background: khaki;
}
运行效果如图所示：
注意：选择器有权重
选择器具有优先级：导致样式覆盖
优先级从小到大排列：统配选择器<标签选择器<类选择器<id选择器<内联样式（行内样式：style）
选择器的最高权重是：！important 关键字
例：
*{
color: #DD0000;
}
p{
color:blueviolet !important;
font-size: 50px;
}
.p1{
color: red;
font-size: 14px;
}
#p1{
border: 1px solid pink;
color: green;
font-size: 20px!important;
}
<p class="p1" id="p1" style="color: #00FFFF;">猜猜我是什么颜色？有多大？</p>
猜一猜？文字最终显示什么颜色，大小是多大？
运行效果如图：
可以看出文字最终显示为紫色，20像素