用<span class="badge-essence">精华</span>嵌入帖子最外层容器，父容器设position: relative，角标用position: absolute、top: 8px、right: 8px、z-index: 10，并通过prefers-color-scheme适配深色模式。
HTML怎么给帖子加“精华”角标
直接用 <span> 套一层带样式的标签最稳妥，别用语义化标签（比如 <mark> 或 <strong>）硬凑，它们默认样式不可控，也不符合“视觉标识”的本质需求。
常见错误是把角标写成独立元素、脱离原帖容器，导致定位漂移或响应式错位；或者用 position: absolute 但没给父容器设 position: relative，结果角标飞到页面左上角。
- 角标必须嵌在帖子标题或卡片的最外层容器内（比如
<article>或<div class="post">） - 父容器需声明
position: relative - 角标本身用
<span class="badge-essence">精华</span>，避免语义干扰 - 文字内容写“精华”而非图标（如 ❖），保证可访问性和 SEO 友好
CSS实现右上角贴边角标的关键写法
核心就三行：定位 + 偏移 + 层级。不靠 flex 或 grid 布局角标，因为它们会受父容器对齐方式影响，而 position: absolute 是唯一能稳定锚定到右上角的方式。
容易踩的坑是忘记设 z-index，尤其当帖子有阴影、圆角或 hover 浮层时，角标会被盖住；还有人用 top: 0; right: 0 却没留边距，导致紧贴边框、视觉拥挤。
立即学习“前端免费学习笔记（深入）”；
-
top: 8px和right: 8px比0更安全，留出呼吸感 - 必须配
z-index: 10（或更高），确保压在其他内容之上 - 用
transform: translate(50%, -50%)配合top/right可精准居右上角，但仅在需要像素级对齐时才加 - 字体大小建议用
0.75em，避免在小屏下撑开容器
怎么让“精华”角标适配深色模式
不能只写一套颜色，否则深色背景下文字看不清。用 @media (prefers-color-scheme: dark) 切换背景和文字色是最轻量、兼容性最好的方案。
有人试图用 CSS 自定义属性（--badge-bg）配合 JS 动态切换，反而增加复杂度，且首次渲染可能闪白/闪黑；也有人直接写两套 class，维护成本高。
- 基础样式里设浅色模式：
background: #ff6b35; color: white; - 媒体查询内覆盖：
@media (prefers-color-scheme: dark) { .badge-essence { background: #d32f2f; color: #fff; } } - 避免用
opacity或半透明白色背景，深色模式下依然发灰、辨识度低 - 不依赖用户系统设置？那就加一个 data 属性（如
data-theme="dark"）配合 CSS 属性选择器，更可控
要不要加动画或点击反馈
不要。角标是静态状态标识，不是交互控件。加 hover 缩放、淡入或点击弹窗，既无实际功能，又干扰信息识别，还可能触发意外重绘（尤其低端设备）。
唯一可考虑的微动效是：鼠标悬停时轻微提升 z-index 和加一像素阴影，仅限运营后台预览页；线上生产环境一律禁用。
- 禁用所有
transition和@keyframes相关规则 - 如果产品硬要“点亮效果”，改用 class 切换（如
badge-essence--lit），由 JS 控制，但默认不启用 - 无障碍方面，确保角标文字被屏幕阅读器读出（它默认会读
<span>内文本）
角标看着小，但一旦嵌进瀑布流、列表复用、服务端渲染或 SSR/CSR 混合场景，定位失效、重复渲染、主题错乱的问题就会集中爆发。最稳的做法：样式全内联在组件里，不抽离成全局 class，避免被第三方 CSS 覆盖。
