:target 伪类在 Firefox 中无法正常工作

我正在使用 :target 伪类制作一个具有 CSS 灯箱类型效果的页面。当您单击图像时，会弹出一个包含信息的框，当您单击任意位置时，该框会再次消失。

它在 Chrome 和 IE 中运行良好，但在 Firefox 中存在一个奇怪的错误当您将鼠标移离灯箱 div 时，灯箱 div 中的文本消失。它的作用类似于悬停效果，只有将鼠标悬停在文本上时才能看到文本。

我希望这个解释是有道理的，如果我不清楚，请告诉我。

我的 CSS 在这里：

.lightbox {
display: none;
position: absolute;
z-index: 8;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff; 
padding-left: 30px;
}

.lightbox:target {
/* Show lightbox when it is target */
display: block !important;
outline: none;
}

如果您需要更多信息，请与我们联系。

非常感谢！

伪类目标适用于id元素，不classes: https://developer.mozilla.org/en-US/docs/Web/CSS/:target https://developer.mozilla.org/en-US/docs/Web/CSS/:target

:target 伪类表示唯一元素（如果有），其 id 与文档 URI 的片段标识符匹配。

尝试在 CSS 中将 .lightbox 替换为 #lightbox，并且您的 HTML 元素应该是<div id="lightbox">

#lightbox {
    display: none;
    position: absolute;
    z-index: 8;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff; 
    padding-left: 30px;
}

#lightbox:target {
    /* Show lightbox when it is target */
    display: block !important;
    outline: none;
}