Flask模板中CSS:hover生效，但:after与:visited伪类无效问题排查

问题详情 #

在Flask模板中，按钮的:hover伪类可正常高亮，但:after和:visited伪类完全无效果，按钮功能正常。另外，:root中定义的--main-color无法被识别（未使用保留字，但不生效）。

HTML代码 #

<div class="btn-group">
    <button id="Download" onclick="window.location.href = '{{ url_for('download_shelf_func') }}';"> Download A Shelf </button>
    <button id="Export" onclick="window.location.href = '{{ url_for('export_shelf_func') }}';"> Export A Shelf </button>  
    <button id="Home" onclick="window.location.href = '{{ url_for('index') }}';"> Return Home </button>
</div>

CSS代码 #

:root {
    --primary-bg-color: #242c3a;
    --primary-color: #87abe5;
    --container-bg-color: #0a355b; 
    --highlight-color: #c3cbeb;
    --landing-color: #7da5e0;
}

.btn-group {
    position:relative;
}

.btn-group button {
    color: var(--primary-bg-color);
    background-color: var(--primary-bg-color);
    border: 1px solid var(--primary-bg-color);
    vertical-align: top;
    border-radius: 8px;
    width: 150px;
    height: 30px;
    cursor: pointer;
    font-size: .8em;
    padding: 0.3em;
    margin-top: 15px;
}
    
.btn-group button:after, button:visited {
    background-color: var(--landing-color);
}

.btn-group button:hover {
    background-color: var(--highlight-color);
}

已尝试的修改 #

1. 单独设置选择器

button:visited {
    background-color: var(--landing-color);
}

.btn-group button:after {
    background-color: var(--landing-color);
}

.btn-group button:hover {
    background-color: var(--highlight-color);
}

2. 使用双冒号::after

.btn-group button::after {
    background-color: var(--landing-color);
}

3. 调整选择器顺序

.btn-group button:hover {
    background-color: var(--highlight-color);
}

button:visited {
    background-color: var(--landing-color);
}

.btn-group button:after {
    background-color: var(--landing-color);
}

问题原因与解决方案 #

1. :visited伪类无效 #

:visited是专门为<a>标签设计的伪类，用于标记用户已访问过的链接。<button>元素不属于链接范畴，哪怕通过onclick实现跳转，也不会触发:visited状态，因此该伪类对按钮完全无效。

2. ::after伪元素无效 #

伪元素::after默认不会渲染，必须满足两个条件：

• 必须设置content属性（哪怕是空字符串content: ""），否则浏览器不会生成这个伪元素。
• 需要设置显示方式（如display: block/inline-block）或定位属性，让伪元素拥有宽高，背景色才能显示。

修改后的::after示例代码：

.btn-group button {
    position: relative; /* 让伪元素相对于按钮定位 */
    /* 其他原有样式 */
    color: var(--primary-color); /* 修正文字颜色，避免和背景色重叠 */
}

.btn-group button::after {
    content: ""; /* 必须项 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--landing-color);
    border-radius: 8px;
    z-index: -1; /* 放在按钮文字下方，避免遮挡 */
}

3. --main-color变量无效 #

你的:root中并未定义--main-color变量，仅定义了--primary-bg-color等5个变量。如果代码中使用了var(--main-color)，浏览器会因变量未定义而忽略该属性，使用默认值。解决方法：

• 在:root中添加--main-color: #你的颜色值;
• 或把代码中的--main-color替换为已定义的变量（如--primary-color）

补充：按钮初始样式优化 #

原按钮的color和background-color都使用了--primary-bg-color（深色），导致文字和背景色一致，按钮文字默认不可见，建议将color改为var(--primary-color)或其他浅色变量。

内容的提问来源于stack exchange，提问作者Meghan M.