（6）基础选择器+选择器优先级
选择器的种类：
1、标签选择器
语法：div{}
2、通配选择器
语法： *{}
3、class选择器(类选择器)：
语法： .class{]
4、id选择器
语法： #box
5、！import选择器
语法： div{background-color: yellowgreen!important;}
PS：这个语法比较特殊，在语句的值和结束符中间写
优先级
！import > 行间式 > id > class> 标签 > 通配
PS：什么是行间式，行间式就是在标签的内部书写格式
基础选择器实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>css基础选择器</title>
<style>
/*这里使用div做选择器，则会出现没有办法控制某一个标签，只要是div标签都会根据这个标签改变*/
/*这就是标签选择器*/
div{
width: 200px;
height: 200px;
/*border-radius这个是圆角设置*/
border-radius: 50%;
background-color: blue;
}
/*通配选择器，将所有页面中有显示效果的都会加上参数（html、body及body下的所有显示标签）*/
*{
/*broder边框，1px就是1像素，solid就是实线，black就是定义边框的颜色*/
border: 1px solid black;
}
/*class选择器，类选择器,用 . 来标识class*/
/*background-color优先级高于color，同时出现则background-color生效*/
.box{
color: hotpink;
background-color: aquamarine;
}
/*id选择器（id名是唯一标识，用来唯一标识标签）,用#标识id*/
/*id名避免重名，因为在js中能识别id名，但是只会找到第一个，后面的所有重名都找不到*/
/*id选择器的优先级比class选择器高*/
#box{
background-color: khaki;
}
/*！import选择器*/
/*这个import优先级最高，而且js无法修改，要慎用*/
div{
background-color: yellowgreen!important;
}
</style>
</head>
<body>
<div class="box">123</div>
<!--这里采用了行间式设置了区域颜色，行间式的设置优先级大于id选择器，是最高的优先级-->
<div class="box" id="box" style="background-color: plum">456</div>
<div>789</div>
</body>
</html>
