CSS如何通配匹配动态日期busy类 实现日历忙日hover提示

原有代码失效原因 #

• 核心误区：不需要匹配动态变化的日期类，元素上的busy是固定的独立类名，直接用.busy类选择器即可选中所有忙日元素。
• [class^="busy"]的匹配规则是class属性值的开头为busy字符串，但你的忙日class值开头是动态日期（比如2022-06-28），busy是第二个类，因此完全匹配不到；另外你代码里的引号是中文全角的”，CSS语法要求必须用英文半角引号，这也是选择器失效的原因之一。
• content属性仅对::before/::after伪元素生效，直接把该属性写在元素本身的样式规则里，不会生成任何提示内容。
• 伪元素做绝对定位时，需要给父级（即忙日元素）设置position: relative，否则提示框会相对于整个页面定位，出现位置错乱。
• 你原有样式里同时写了transform: rotate(0deg)和带前缀的45度旋转，最终生效的是0度无旋转效果，和预期不符。

可直接使用的实现代码 #

优先使用性能更好、匹配更稳定的类选择器方案，把代码粘贴到WordPress主题「自定义CSS」或者插件的自定义样式区域即可：

/* 给忙日元素设置相对定位，作为提示框的定位基准 */
.busy {
    position: relative;
    cursor: not-allowed; /* 可选：鼠标悬浮时显示禁止光标，更符合交互预期 */
}

/* hover时通过after伪元素生成提示框 */
.busy:hover::after {
    display: block;
    content: "DAY IS NOT AVAILABLE";
    position: absolute;
    z-index: 10;
    background: #f8f8f8;
    border-right: 5px solid #dfdfdf;
    border-bottom: 5px solid #dfdfdf;
    padding: 5px;
    width: 250px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    /* 提示框位置可根据你的日历实际布局调整数值 */
    top: 20px;
    left: 20px;
}

如果担心主题其他模块也用到了.busy类造成样式冲突，可以用属性选择器精准匹配带独立busy类的日历元素，替换上面的选择器即可：

/* 匹配class属性中包含“空格+busy”的元素，避免误匹配busy开头的其他类名 */
[class*=" busy"] {
    position: relative;
    cursor: not-allowed;
}
[class*=" busy"]:hover::after {
    display: block;
    content: "DAY IS NOT AVAILABLE";
    position: absolute;
    z-index: 10;
    background: #f8f8f8;
    border-right: 5px solid #dfdfdf;
    border-bottom: 5px solid #dfdfdf;
    padding: 5px;
    width: 250px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 20px;
    left: 20px;
}

补充说明 #

• 所有CSS代码中的符号必须使用英文半角格式，不要出现中文引号、中文分号，否则样式会完全失效。
• 如果提示框被其他日历元素遮挡，可以适当调高z-index的数值。
• 如果不需要提示框旋转效果，删掉三行transform相关代码即可。

内容的提问来源于stack exchange，提问作者MEandme