Html 嵌套中元素的样式：未应用已访问声明（vuejs、sass）

我被这个弄糊涂了。我有一个网格的项目与一个链接，以包装图像，图像覆盖div，和一个标题。访问链接时，嵌套图像覆盖应更改其背景色不透明度。但它并没有被应用。我可以验证：visted伪类是否生效，因为它将对嵌套标题应用颜色更改。但是不透明度不会改变。我试过很多方法来应用它。这是一支钢笔：

HTML

从

出于隐私原因，浏览器严格限制您可以使用此伪类应用哪些样式，以及如何使用这些样式：

允许的CSS属性为

color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.

允许的SVG属性是

fill

和

stroke

将忽略允许样式的alpha组件。将改用元素的non-：visted状态的alpha组件，除非该组件为0，在这种情况下：visted中设置的样式将被完全忽略。 虽然这些样式可以向最终用户更改颜色的外观，但是window.getComputedStyle方法将始终返回未访问颜色的值

---

根据我自己的观察，链接的子元素也受到相同的样式限制。

我记得

：visted

仅出于安全原因接受某些属性更改。-嗯……很公平。把它记下来作为答案，我就接受了

.gallery__container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1.375vw;
  margin: 0 auto;
  padding: 40px 50px;
}

.gallery__image_container {
  position: relative;
}

.gallery__item {
  width: 100%;
  height: auto;
}

.gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  &:visited {
    color: red; //just to verify visited pseudoclass is applied
    .gallery__overlay {
      background-color: rgba(0,0,0,.1) !important; //NOT WORKING
    }
  }
}

.gallery__image {
  //width: 100%;
  //height: auto;
}

.gallery__overlay {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(black, 0.9);
  z-index: 1;
}

color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.