(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{
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>
原文地址:https://www.cnblogs.com/shizhengquan/p/10334040.html