HTML中的样式控制与样式优先权-html教程-PHP中文网

css样式未生效主因是优先级被覆盖，行内样式权重最高，id选择器＞类选择器＞标签选择器，可用devtools styles面板查看被划掉的规则及来源。

html中的样式控制与样式优先权

style 属性写对了，样式却没生效？不是代码错了，是优先级被覆盖了。CSS 样式生效与否，不看谁“写得晚”，而看谁“权重高”。

行内样式为什么总能赢？

因为 style 属性天然拥有最高来源优先级 —— 它比 <style></style> 标签、外部 .css 文件甚至它们里面的 !important 都高。

常见错误现象：

在外部 CSS 里写了 #header { color: red !important; }，但 HTML 中 <div id="header" style="color: blue;"> 还是显示蓝色<li>用 JavaScript 动态设置 <code>element.style.color = 'green'，结果发现旧样式还在生效（其实是没清掉内联值）

使用场景：

临时调试：快速验证某条样式是否起作用
服务端渲染时注入动态值（如用户主题色）
Canvas 或 SVG 元素的坐标/尺寸控制（需 JS 驱动）

注意：style 是字符串，JS 修改时要拼全属性名，比如 el.style.marginTop = '8px'，不能只写 marginTop: '8px'。

`<style></style>` 和 `<link rel="stylesheet">` 的区别在哪？

两者都属于“内部样式表”和“外部样式表”，但加载时机与作用域不同。

关键差异：

<style></style> 在 HTML 文档内，解析时同步执行，无额外请求，适合首屏关键样式
<link rel="stylesheet"> 触发 HTTP 请求，浏览器会阻塞渲染直到 CSSOM 构建完成，但利于缓存和复用
同为“文档内样式”，<style></style> 的选择器特异性（specificity）和 .css 文件完全一致，不因位置而变

容易踩的坑：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

把大量 CSS 写进 <style></style> 导致 HTML 文件膨胀，影响首屏传输效率
用 @import 在 <style></style> 里引入外部文件（已废弃），会阻塞并降低优先级
<link> 路径写错（如漏掉 ./ 或大小写不匹配），控制台报 Failed to load resource，但样式静默失效

ID、类、标签选择器的优先级怎么算？

CSS 选择器优先级不是“谁写在后面谁赢”，而是按“特异性（specificity）”数值比大小：ID > 类 > 标签。

计算规则（a,b,c 计数）：

a = !important 数量（仅同源比较时有效）
b = ID 选择器个数（如 #nav #menu 算 2）
c = 类 / 伪类 / 属性选择器个数（如 .btn.active:hover 算 3）
d = 标签 / 伪元素个数（如 div p::before 算 3）

示例对比：

div#main .content a { color: blue; }   /* b=1, c=2, d=2 → 0,1,2,2 */
#main .nav a:hover { color: red; }     /* b=1, c=2, d=2 → 0,1,2,2 */
/* 两者特异性相同，后出现的生效 */

性能提示：高特异性选择器（如 #app #header .nav li a）不仅难维护，还会拖慢浏览器样式匹配速度。