CSS 选择器 - 如果后跟 class，则取消设置内容

Question

我目前尝试取消设置 css class 中的 ::before 内容，如果以下元素是图像或有特定的 class 名称。

结构

我得到的第一个元素是一个a:href没有特定的id（我不能设置一个）。该元素使用 ::before（一个图标）创建另一个伪元素。

第二个元素是a:href

里面的一张图片class

示例：

    <a href="https://example.org/assets/uploads/2015/02/A-Upload.jpg">
<img class="alignright wp-image-8184 size-medium" width="300" height="188" sizes="(max-width: 300px) 100vw, 300px" srcset="https://example.org/assets/uploads/2015/02/A-Upload-300x188.jpg 300w, https://example.org/assets/uploads/2015/02/A-Upload-1600x1000.jpg 1600w" alt="test" src="https://example.org/assets/uploads/2015/02/xA-Upload-300x188.jpg.pagespeed.ic.H4F1dyfjOe.jpg">
</a>

我想使用 css 选择器并从 a 中删除 ::before 内容，如果第二个元素是图像或得到特定的 css class .

我现在尝试了几种方法，比如

#main-content .content .post-inner .entry p a::before ~ img.alignright{
 content: unset!important;
}

没有成功。我希望有人能告诉我我可能做错了什么。

Answer 1

目前无法单独根据 CSS 中的 child 元素来设置 parent 元素的样式。您尝试做的事情根本不可能（在 CSS3 中）。

您需要将 class 添加到 a（或另一个 parent 节点）并将其用作您的参考，或者使用 JavaScript 进行更新parent 的样式基于 child img.alignright.

有人提出了 :has() 选择器，但我认为目前没有任何浏览器支持它。语法类似于：

a:has(> img.alignright):before {
  content: unset;
}

但是，再一次，这只是在 a draft of CSS 4 中，我敢肯定，这仍然是一条出路。

CSS 选择器 - 如果后跟 class，则取消设置内容

CSS Selectors - Unset content if followed by class

css

css-selectors

pseudo-element