子元素上的灰度过滤器在父

Question

我有一组菜单项，它们是包装内的链接。某些链接应该在某个时间点被禁用：它们是灰色的，不可点击。为了保持UI生成相同，我决定采用仅限CSS的解决方案，这非常简单：创建一个绝对定位的::before元素，它覆盖整个菜单项，并带有半透明的黑色背景。

这适用于链接标记中的块已应用filter。它使嵌套内容出现在伪元素之上。在z-index元素上应用::before解决了这个问题，但我想知道filter行为。为什么会这样？

＆＃13;

＆＃13;

.link {
  width: 240px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 10px;
  background-color: cyan;
  position: relative;
}

.link.disabled::before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top : 0;
  background-color: rgba(0,0,0,0.5);
}

.link.disabled.z-index::before {
  z-index: 1;
}

.link > a {
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
}

.filter {
  filter: grayscale(1);
}

＆＃13;

<div class="link disabled">
  <a href="normal">
    <div>Normal</div>
  </a>
</div>

<div class="link disabled">
  <a href="filter">
    <div class="filter">With filter</div>
  </a>
</div>

<div class="link disabled z-index">
  <a href="filter-z-index">
    <div class="filter">With filter + z-index</div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;