同级组合器可以针对像 :before 或 :after 这样的伪元素吗？

同级组合器和伪元素

在这个 CSS 困境中，我们遇到了是否可以定位伪元素的问题，特别是 :before 或 :after，使用兄弟组合器。

考虑以下 CSS：

a[href^="http"]:after {
  content:"";
  width:10px;
  height:10px;
  display:inline-block;
  background-color:red;
}

a[href^="http"] img ~ :after {
  display:none;
}

以及后续 HTML：

<a href="http://google.com">Test</a>
<a href="http://google.com">
  <img  src="/static/imghwm/default1.png" data-src="https://www.google.com/logos/classicplus.png" class="lazy" alt="同级组合器可以针对像 :before 或 :after 这样的伪元素吗？" >
</a>

其目的是将伪元素应用于所有匹配的锚标记，但包含图像的锚标记除外。然而，CSS 未能按预期运行。

答案在于伪元素的本质。根据 CSS 规范，伪元素生成的内容不会影响 DOM 结构。这意味着依赖于 DOM 树中存在的元素的同级组合器无法定位伪元素。

换句话说，CSS 试图隐藏共享锚标记上的 :after 伪元素一位有图像的家长。然而，由于 :after 伪元素没有渲染到 DOM 中，同级组合器不可能找到它。

因此，JavaScript 通常是更适合根据元素定位元素的解决方案。与 DOM 中其他元素的关系。

以上是同级组合器可以针对像 :before 或 :after 这样的伪元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！