CSS选择器的优先级

知识点1:

1.css选择器的优先级(!important(优先数值:∞)>行内式(优先数值:1000)>id(优先数值:100)>class(优先数值:10)>标签选择器(优先数值:1)>继承

2.同一选择器优先数值越高,优先级就越高。

3.无论多少个弟弟也大不过一个哥哥。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
color: red;
}

.c1{
color: green;
}

div{
color: orange;
}

.c2 .c3 .c4 .c5{
color: yellow;
}

.c2 .c3 .c5{
color: gray;
}

#i2{
/color: blue;
}

.c5{
color: purple!important;
}

</style>

</head>
<body>

<div class="c1" id="i1">huchangxi</div>

<div class="c2">
<div class="c3">
<div class="c4">
<p class="c5" id="i2" style="color: lightcoral">hulanxi</p>
</div>

</div>

</div>

</body>
</html>

 

posted @   呼长喜  阅读(447)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示