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

Question

真的被这个搞糊涂了。我有一个项目网格，其中包含 link 来包裹图像、图像叠加层 div 和标题。当 link 被访问时，嵌套的图像覆盖应该改变它的背景颜色不透明度。但它没有被应用。我可以验证 :visited 伪类是否生效，因为它将对嵌套标题应用颜色更改。但是不透明度不会改变。我已经尝试了很多应用它的方法。这是一支笔：

https://codepen.io/heaversm/pen/gOYNJQv

HTML

<div class="gallery__container">
  <div class="gallery__item">
    <a class="gallery__link" href="http://codepen.io">
      <div class="gallery__image_container">
      <img src="https://i.imgur.com/MQcuk3n.jpg">
      <div class="gallery__overlay"></div>
      </div>
      <p class="gallery__title">Title</p>
    </a>
  </div>
  <div class="gallery__item">
    <a class="gallery__link" href="http://nonsensesite.com">
      <div class="gallery__image_container">
      <img src="https://i.imgur.com/MQcuk3n.jpg">
      <div class="gallery__overlay"></div>
      </div>
      <p class="gallery__title">Title</p>
    </a>
  </div>
</div>

CSS

.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;
}

Answer 1

来自https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

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

允许的 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 组件将被忽略。将使用元素的非 :visited 状态的 alpha 组件，除非该组件为 0，在这种情况下，将完全忽略 :visited 中设置的样式。虽然这些样式可以改变最终用户的颜色外观，但 window.getComputedStyle 方法将始终 return 未访问颜色的值。

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

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

styling on element inside nested :visited declaration not being applied (vuejs, sass)

html

css

pseudo-class