如何修改Fullcalendar中Month/Week/Day激活按钮的背景色？

问题说明 #

在Mac版Visual Studio 2022开发ASP.NET MVC应用，使用FullCalendar 6.1.4时，尝试修改「Month」「Week」「Day」按钮点击后的背景色，发现:hover、:disabled伪类能正常生效，但:active和:focus伪类完全没效果。

原因分析 #

FullCalendar的视图切换按钮在**处于激活状态（当前选中的视图）**时，会自动给按钮添加fc-button-active类，而非依赖CSS的:active伪类（:active仅代表点击瞬间的状态，并非持续的激活状态）。之前的样式没针对这个类做设置，所以无法生效。

解决方案 #

直接针对fc-button-active类编写样式，同时为了确保样式优先级覆盖FullCalendar默认样式，需要保持选择器的层级和原样式一致（比如保留.fc .fc-button的前缀）。

修改后的完整CSS代码 #

.fc .fc-col-header-cell-cushion {
    display: inline-block;
    padding: 2px 4px;
    color: #000;
    text-decoration:none;
    font-family: "Helvetica Neue", "Arial", sans-serif;
    font-weight:400;
}

.fc .fc-button {
    background-color: white;
    outline:none;
    border:none;
    border-radius: 12px;
    color: lightgrey;
}
.fc .fc-button:hover {
    background-color: lightgrey;
    color: white;
}

.fc .fc-button:disabled {
    background-color: lightgrey;
    color: white;
}
/* 新增激活状态样式 */
.fc .fc-button.fc-button-active,
.fc .fc-button.fc-button-active:hover {
    background-color: lightgrey;
    color: white;
}
.fc .fc-prevMonth-button,
.fc .fc-nextMonth-button {
    font-size: 18px;
}

额外说明 #

如果需要区分点击瞬间的状态（:active）和持续的激活状态，可以同时保留:active的样式，但注意选择器优先级：

.fc .fc-button:active {
    background-color: #ccc; /* 点击瞬间的背景色 */
    color: #fff;
}

内容的提问来源于stack exchange，提问作者Stéphane