html5语义化标签不影响css样式，需手动编写css规则；语义标签仅提升可访问性与seo，样式生效取决于选择器优先级，推荐语义标签+class组合使用。
class 名和语义化标签不是一一对应关系
HTML5 语义化标签（如 <article></article>、<nav></nav>、<section></section>）本身不带样式，浏览器默认仅做极简渲染。你写 <aside></aside> 不等于自动有侧边栏样式，CSS 不会因为标签名变就“聪明匹配”。
常见错误是以为用了 <main></main> 就能直接用 main { margin: 1rem; } 覆盖全局布局，结果发现被重置 CSS 或框架样式覆盖了。
- 语义标签只影响 DOM 结构、可访问性（a11y）和 SEO，不影响 CSS 选择器优先级
- 想让
<header></header>看起来像页眉？得手动写header { background: #333; color: white; } - 多个
<section></section>套嵌时，别依赖标签层级自动区分样式——用class或data-属性做区分更可靠
选择器优先级决定样式是否生效，不是语义正确性
哪怕 HTML 完全语义正确，CSS 依然可能不生效。核心原因：选择器权重压不过其他规则。
比如你写了 nav ul { list-style: none; }，但第三方库的 .navbar ul { list-style: disc !important; } 会赢——这不是语义问题，是 CSS 层叠规则在起作用。
立即学习“前端免费学习笔记（深入）”；
- 避免过度依赖元素选择器（如
button），容易被类名或 ID 选择器压制 - 语义化结构越深（如
main > article > section > p），选择器越难维护，也越容易被意外覆盖 - 推荐组合：语义标签 + 明确 class，例如
<nav class="primary-nav"></nav>，再写.primary-nav { display: flex; }
自定义属性（data-*）比 class 更适合标记语义意图
当需要表达“这个 <div> 实际上是卡片容器”，但又不想污染 class 的视觉含义时，<code>data- 属性比硬塞 class 更干净。
比如 <div data-role="card"> 配合 <code>[data-role="card"] { border-radius: 8px; }，既保留语义意图，又不干扰 .card 可能已有的设计系统含义。
-
class应该描述“它看起来像什么”（.btn-primary），data-描述“它行为上是什么”（data-type="modal-trigger"） - 用
[data-]选择器写样式没问题，但注意它不支持伪类（如[data-open]:hover是合法的，但[data-open]::before也合法，只是别指望它自动响应 JS 状态变化） - 不要用
data-替代 class 来做常规样式控制——性能略低，且可读性差
IE 和旧版 Safari 对语义化标签的兼容需要显式声明
老版本 IE（≤8）不认识 <section></section> 这类标签，直接当未知元素处理，连 display: block 都不给。这不是 CSS 写错，是解析器根本没这概念。
即使加了 html5shiv，如果页面没声明 ，或者用了 XHTML 声明，shiv 也大概率失效。
- 必须确保文档开头是
，且无任何字符（包括空格、BOM）在它前面 - 在
中引入html5shiv时，要用条件注释包裹（针对 IE ≤ 9）：<!--[if lt IE 9]><script src="html5shiv.js"></script><![endif]--> - 现代项目（支持 ES6+、Flexbox）其实没必要兼容 IE8，但若真要保，光靠语义标签 + CSS 是不够的，得配合 JS 补丁
