<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
/*标签选择器*/
div{
color: red;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>
代码:
“*” 是通配符,可以匹配所有的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>
代码:当前div标签的颜色是绿色,因为是就近原则,div标签与green设计的样式最近。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style>
/*类选择器*/
.test1{
color: goldenrod;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div class="test1">我是div</div>
</body>
</html>
代码:类选择器 > 标签选择器
上图:可以看到 类选择器 是 优先于 标签选择器的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器:a.就近原则 b.叠加原则
2.优先级:
类选择器 > 标签选择器
-->
<style>
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div class="test1 test2">我是div</div>
</body>
</html>
代码:
在div标签中在加一个 test2类标签(针对同一个标签,类标签可以同时加多个);
设计test2类标签为紫色。
上图:图中是紫色;当前有test1和test2两个类选择器,相同类别是就近原则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器:a.就近原则 b.叠加原则
2.优先级:
id选择器 > 类选择器 > 标签选择器
-->
<style>
/*id选择器*/
#main{
color:mediumvioletred;
}
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
代码:id选择器 > 类选择器
上图:
id选择器 优于 类选择器; 注意id是唯一的,同一个标签不可以设置多个id,否则id选择器就会失效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器:a.就近原则 b.叠加原则
2.优先级:
id选择器 > 类选择器 > 标签选择器
-->
<style>
/*复合选择器*/
div.test1{
color: pink;
}
/*id选择器*/
#main{
color:mediumvioletred;
}
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
代码:id选择器 > div+类选择器(复合选择器)
上图:颜色没有变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器:a.就近原则 b.叠加原则
2.优先级:
id选择器 > 类选择器 > 标签选择器
-->
<style>
/*复合选择器*/
div.test1{
color: pink;
}
div#main{
color: cornflowerblue;
}
/*id选择器*/
#main{
color:mediumvioletred;
}
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
代码:div+id选择器(复合) > id选择器
选择器的针对性越强,它的优先级就越高
选择器的权值:
通配选择符(*):0
标签: 1
类: 10
属性: 10
伪类: 10
伪元素: 10
id: 100
important: 1000
原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先(就近)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<!--
1.相同级别的选择器:a.就近原则 b.叠加原则
2.优先级:
id选择器 > 类选择器 > 标签选择器
-->
<style>
/*复合选择器*/
div.test1{
color: pink;
}
div#main{
color: cornflowerblue;
}
/*id选择器*/
#main{
color:mediumvioletred;
}
/*类选择器*/
.test1{
color: goldenrod;
}
.test2{
color: purple;
}
/*标签选择器*/
div{
color: red;
}
div{
color: green !important;
}
/*通配符*/
*{
font-size: 50px;
}
</style>
</head>
<body>
<div id="main" class="test1 test2">我是div</div>
</body>
</html>
代码:在标签选择器中加了一个 !important,所以其当前的权值是1000+1=1001
important > 行内设计 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。