css权重简单之谈
原来回复51js上面一个兄弟的问题，害怕在茫茫的信息之海中会被淹没，暂时转到这儿来，以示学习总结之意。
在回答别人问题时，对自己真是一个考验提高，在总结，摸清原有模糊概念的基础上要讲，全，简，易。真是不容易。佩服那些写教程福利芸芸众生的先行者们~！！
下面简单谈谈css的权重：
权重简单的也可以理解为JavaScript中的作用域，回头仔细想想，其实所有的IT抽象世界的东东都是通的。
内嵌样式 > 内部样式表 > 外联样式表
如：
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<style>
.txt{color:blue;}
</style>
</head>
<p class="txt" style="color:red">这是一个测试文本</p>
<link href="main.css" rel="stylesheet" type="text/css" />
<style>
.txt{color:blue;}
</style>
</head>
<p class="txt" style="color:red">这是一个测试文本</p>
.txt{color:green}
内嵌样式：
style="color:red"
<style>
.txt{color:blue;}
</style>
.txt{color:blue;}
</style>
外联样式表：
中内容。
这是大体上的css权重量级别，一般常用外联。
然后我们在看常用的main.css中权重级别：
在main.css 中：
id选择器的权重是大于类选择器的权重。
如：
#test{color:red;}
.test{color:blue;}
.test{color:blue;}
另外如果在一个css文件中出现两个同命的css属性值，那会怎么样呢？当然跟其它面向对象程序语言中的，覆盖相似，下面的属性会覆盖掉上面的属性。如：
.test2{color:red;border:1px solid #ccc;}
.test2{color:blue;font-size:14px;}
.test2{color:blue;font-size:14px;}
color:blue;font-size:14px;border:1px solid #ccc;
还有一种情况是层次选择器下面权重的延伸，这种情况是用js操作动态效果时可以节省不少js代码，在逻辑上面来说，展现与行为的分离也是尽善尽美。
.txt{color:blue;}
#wrap .txt{color:red;font-size:14px;}
#wrap .txt{color:red;font-size:14px;}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述