本文介绍在严格内容安全策略（csp）禁止内联样式的前提下，通过 html 属性 + css 属性选择器替代 `style="--rating: x"` 的方案，实现纯 css 星级评分组件，兼顾安全性与可维护性。
在启用 Content-Security-Policy: default-src 'self'; style-src 'self' 等严格策略时，内联样式（如
）会被浏览器直接阻止，导致星级无法动态渲染。原方案依赖 PHP 注入 CSS 自定义属性，虽简洁但违反 CSP 最佳实践。以下是安全、语义化且无需 JavaScript 的纯 CSS 替代方案。
✅ 推荐方案：使用属性选择器映射固定评分值
将动态的 --rating 值转为静态 HTML 属性（如 starrating="4"），再通过 CSS 属性选择器为每个可能取值（1–5）显式声明 --percent：
/* 预定义各评分对应的填充百分比 */
[starrating="1"] { --percent: 20%; }
[starrating="2"] { --percent: 40%; }
[starrating="3"] { --percent: 60%; }
[starrating="4"] { --percent: 80%; }
[starrating="5"] { --percent: 100%; }
/* 公共样式：移除内联，统一定义基础变量 */
.Stars {
display: inline-block;
font-size: 20px;
font-family: "Times New Roman", Times, serif;
line-height: 1;
--star-size: 60px;
--star-color: #fff;
--star-background: #fc0;
}
.Stars::before {
content: '★★★★★';
letter-spacing: 3px;
background: linear-gradient(90deg,
var(--star-background) var(--percent),
var(--star-color) var(--percent)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 注意：需确保父元素有足够高度以显示文字渐变 */
}对应 HTML 改写为（完全无内联样式）：
✅ 优势说明 完全符合 style-src 'self' 要求，所有样式均来自外部 CSS 文件； 保留纯 CSS 实现，零 JavaScript 依赖； 利用 HTML 属性语义清晰（starrating 比 data-rating 更具可读性，且不触发 data-* 的 DOM API）； 支持服务端直接输出，无运行时计算开销。
⚠️ 注意事项与增强建议
-
输入校验：PHP 输出前务必强制转换为整数并限定范围（1–5），防止无效属性值：
$rating = (int)$row['RATING']; $rating = max(1, min(5, $rating)); // 确保合法
-
无障碍支持：当前方案仅视觉呈现，建议补充 ARIA 属性提升可访问性：
扩展性提示：若未来需支持半星（如 4.5），可引入额外属性（如 starrating="4.5"）并增加对应 CSS 规则，或改用 CSS @property（需现代浏览器支持）配合 calc() —— 但当前主流兼容性仍推荐离散值方案。
该方案在安全性、兼容性与开发效率之间取得良好平衡，是 CSP 环境下星级组件落地的成熟实践。
