无法直接高亮原生的周末，因其DOM不可见且不支持CSS伪类；必须改用flatpickr等JS日历组件，通过onDayCreate钩子添加weekend类并配合!important样式实现高亮。
HTML5 <input type="date"> 无法直接高亮周末
浏览器原生的 <input type="date"> 不支持通过 CSS 选择器区分周末（如 :nth-child 或自定义伪类），它渲染的是系统级日期控件，DOM 结构不可见、不可样式化。所谓“高亮周末”，必须放弃原生控件，改用 JavaScript 驱动的日历组件或自建 HTML 表格日历。
用 flatpickr 实现周末高亮最省事
第三方库 flatpickr 支持 onDayCreate 钩子，可在每个日期单元格生成时动态加 class：
flatpickr("#myDate", {
onDayCreate: function(dObj, dStr, fp, dayElem) {
const day = dObj.getDay(); // 0=Sunday, 6=Saturday
if (day === 0 || day === 6) {
dayElem.classList.add("weekend");
}
}
});再配 CSS：
.flatpickr-day.weekend {
background-color: #ffebee !important;
color: #c62828 !important;
}-
!important是必须的，因为flatpickr内联样式优先级高 - 注意
getDay()返回值：周日是0，不是7 - 移动端需测试触控反馈是否受影响
纯 CSS 无 JS 方案？只适用于静态日历表格
如果你手动用 <table> 渲染一个月（比如服务端输出或 JS 拼接），可利用 CSS 的 <code>:nth-child() 粗略定位周末列：
立即学习“前端免费学习笔记（深入）”；
/* 假设每周 7 天，第一列为周日 */
.calendar td:nth-child(1),
.calendar td:nth-child(7) {
background-color: #f3e5f5;
}- 这依赖固定列顺序和完整周展示（不能跨月截断）
- 无法处理当月首日/末日落在中间某天的情况，需 JS 计算补空格后才能对齐
- 语义差，无障碍支持弱，
<input>值仍需额外同步
Chrome/Firefox 的 ::-webkit-calendar-picker-indicator 不管用
有人试图用伪元素覆盖日期控件下拉箭头来“劫持”弹出日历，但：
-
::-webkit-calendar-picker-indicator只控制按钮样式，不开放日历 DOM - Firefox 使用
::-moz-date-time-picker，同样不可操作内部日期格 - 所有主流浏览器都明确禁止 JS 访问原生日期弹窗的 shadow DOM 节点
绕过限制的唯一可靠路径：不用原生 type="date"，换可控日历。
