style标签用于在HTML内部定义CSS样式，优先级介于内联样式与外部样式表之间，其生效受位置（文档流顺序）、选择器特异性和!important影响，应始终置于head内。
style 标签的作用很直接：在 HTML 文档内部定义 CSS 样式，不依赖外部文件，也不写在元素的 style 属性里。它本身不决定优先级高低，但它的「位置」和「内容」共同决定了实际生效效果。
为什么 style 标签里的样式有时被覆盖？
因为 style 标签属于「内部样式表」，其来源优先级低于内联样式（style 属性），但高于外部样式表（<link rel="stylesheet">）。但它无法对抗更高特异性的选择器或 !important 声明。
- 同一元素上，
<p style="color: red"></p>会盖过<style>p { color: blue }</style> -
<style>#main p { color: green }</style>能压过<style>p { color: blue }</style>，因为 ID 选择器特异性（100） > 标签选择器（1） - 如果外部 CSS 文件里写了
.alert { color: red !important }，哪怕<style>.alert { color: blue }</style>在它后面，也无效
style 标签的位置会影响样式生效吗？
会影响——不是因为标签放哪儿，而是因为浏览器解析 HTML 是从上到下顺序执行的，CSS 规则按声明顺序层叠。放在 末尾的 <style></style> 比开头的更可能“赢”过前面同优先级的规则。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
<style>p { color: red }</style> <link href="base.css" rel="stylesheet">→base.css里同选择器会覆盖red -
<link href="base.css" rel="stylesheet"> <style>p { color: red }</style>→red更大概率生效（前提是特异性不更低） - 多个
<style></style>标签之间也遵循“后声明者胜”，无需手动删前面的
什么时候该用 style 标签而不是 style 属性？
当你要批量控制一组元素，又不想引入外部文件或污染 HTML 结构时。style 属性只作用于单个元素，而 <style></style> 可复用选择器，且支持媒体查询、伪类等完整 CSS 功能。
立即学习“前端免费学习笔记（深入）”；
- 需要响应式逻辑：
<style>@media (max-width: 768px) { .nav { display: none } }</style>——style属性做不到 - 要给多个同类元素统一设样式，比如所有
<button class="primary"></button>，用<style>.primary { background: #007bff }</style>比每个都加style="background: #007bff"干净得多 - 动态注入样式（如 JS 插入
<style id="theme"></style>）比遍历 DOM 改每个元素的style属性性能更好
真正容易被忽略的点是：很多人以为把 <style></style> 放在 里也能工作——确实能解析，但不符合规范，部分老浏览器或校验工具会警告，且可能触发重排/阻塞渲染时机不可控。务必始终放在 内。
