CSS异常使用:after

Question

我发现了一个有效的 CSS 片段。我想了解为什么它对我自己的熏陶有效。我的问题是关于在 CSS 中使用 :after 的一般性问题。

Wordpress Twenty Nineteen 主题在特征图像上放置了深色滤镜，以使(白色)标题文本更具可读性。 我正在寻找一种方法来去除特定特征图像上的深色滤镜。 我找到了一个 post这表明这个 CSS:

.site-header.featured-image:after {
   background: none;
}

效果很好!

使用 Firefox 检查器，我看到 .site-header 和 .featured-image 都是封闭类 <header>元素。布局灵活。

我正在努力了解 :after 的用法。我对 :after 的搜索表明这是在元素之后添加“内容”的一种方式。此示例未添加任何内容。相反，它似乎正在修改/覆盖现有属性。

如果我删除“:after”，它就会停止工作，所以这绝对是必要的。

任何专家都可以解释这里发生的事情和/或给我指出解释它的规范吗？

谢谢

Answer 1

它实际上看到的是 specificity .

:after 所做的是在应用了 :after 的元素的最后一个子元素或内容之后添加一个元素。请参阅:https://developer.mozilla.org/en-US/docs/Web/CSS/::after

这是一个粗略的例子

.featured-image {
  position:relative;
  padding:5px;
 
}

.featured-image > p {
  position: relative;
  z-index:10;
}

.featured-image:after {
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: '';
  border: 1px solid black;
  background-color: #CCC;
  z-index:1;
}

.site-header.featured-image:after {
   background: none;
}

<div class="featured-image"><p> :after will have a background</p></div>
<div class="site-header featured-image"><p> :after wont't have a background 2</p></div>

由于 .site-header.featured-image:after 比 .featured-image:after 更具体，.site-header.featured-image :after 优先考虑任何冲突的样式。