strong和em常被意外覆盖，因ua默认样式权重极低（0,0,0,1），易被body * {font-weight:normal}等全局规则覆盖；span内联style可被更高特异性css覆盖，font标签color属性在html5中已被浏览器忽略。
strong、em、span、font 这些标签本身不带强制样式，但一旦被 CSS 规则选中（比如用 p em 或 .content strong），就可能和内联样式、全局重置或第三方库冲突——根本原因不是标签“有默认样式”，而是它们成了选择器的靶子。
为什么 strong 和 em 常被意外覆盖？
浏览器对 strong 默认加粗、em 默认斜体，但这些只是 UA 样式（user agent stylesheet），权重极低（0,0,0,1）。只要页面里有一条 body * { font-weight: normal; }，所有 strong 就立刻失效。
- 常见错误现象：
strong显示不出加粗，DevTools 里看到它的font-weight被划掉，来源是某个通配符或重置 CSS - 使用场景：语义强调必须保留，但设计稿要求统一字体粗细时，不能靠删标签来妥协
- 实操建议：
– 避免用* { font-weight: normal; }全局重置，改用body { font-weight: 400; }+ 显式声明strong { font-weight: 700; }
– 若需禁用默认表现，用strong, em { font-style: inherit; font-weight: inherit; }，而不是粗暴重置所有元素
span 和 font 的 style 属性为什么容易失效？
span 是纯容器，font 是已废弃标签（HTML5 不再推荐），但两者都常被写成 <span style="color:red"></span> 或 <font color="red"></font>。问题出在：它们的 style 属性会被更高特异性的外部规则覆盖，且 font 的属性（如 color）在现代浏览器中已不被解析为样式来源。
- 常见错误现象：
<span style="color:red">文字</span>在某些页面显示黑色；<font color="red"></font>完全无效，控制台无报错 - 参数差异：
style属性权重是(1,0,0,0)，但若外部 CSS 写了#app span { color: blue !important; }，它就输了 - 实操建议：
– 永远不要用font标签，用span+ class 替代
–span的style只用于临时调试或服务端注入动态值（如主题色）
– 真正需要行内控制时，优先用自定义属性 + CSS 变量：<span style="--text-color: red"></span>+span { color: var(--text-color); }
类名和标签组合导致的隐性冲突怎么查？
比如你写了 .article p em { font-style: italic; }，但同事在全局 CSS 里加了 p em { font-style: normal; }。表面看后者更宽泛，但特异性一样（都是 0,0,2,2），结果取决于谁在源码里写在后面——这种依赖顺序的写法，上线后极易被新引入的 CSS 打断。
- 性能影响：高嵌套选择器（如
.layout .content p strong）不仅难维护，还会拖慢浏览器样式匹配速度 - 实操建议：
– 用 BEM 类名替代嵌套，比如把.article p em改成.article__emphasis
– 在 DevTools 的 Styles 面板里，直接看目标元素右侧被划掉的规则，点开“Computed”看最终生效值来自哪条规则
– 同特异性时，别赌“我写的在后面”，用 ID 前缀（如#my-article .article__emphasis）或增加一个类（.article__emphasis--strong）来明确提升 c 值
最易被忽略的是：文本标签本身不冲突，冲突永远发生在“谁选中了它”——em 不重要，.post-content em 才重要；style 不保险，style 和外部规则的 a/b/c/d 对比才决定输赢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
