css - 如何组合::after 和 :not 伪选择器

Question

我有以下 SASS 代码:

section.post {
  a {
    transition: all $aside-animation-time;

    &::after {
      position: absolute;
      bottom: -.5px;
      left: 0;
      width: 100%;
      height: 0;
      content: '';
      border-bottom: 1px solid $primary-color;
    }
    &:hover {
      border-color: $hover-color;
    }
  }
}

我在这里所做的是为所有链接添加一个蓝色底部边框。但是，我注意到当我使用带有内部图像的 anchor 标记时，图像也有边框(因为它也是一个链接)。现在，我的目标是仅将 anchor 样式附加到文本链接。

到目前为止，我尝试的是使用 :not(img)，将其与 ::after 链接起来，覆盖之前的规则等，但没有任何效果如预期。任何帮助将不胜感激。

Answer 1

目前 CSS 没有基于任何子元素来设置父元素样式的选项。如果您使用链接对图像本身进行样式设置，那就没问题了。

您可以使用 jQuery 之类的工具将类添加到任何包含子图像的链接:

$('a:has(img)').addClass('has_img');

然后您可以将它与您的 CSS 一起使用:不像在

section.post {
  a:not(.has_img) {
    transition: all $aside-animation-time;

    &::after {
      position: absolute;
      bottom: -.5px;
      left: 0;
      width: 100%;
      height: 0;
      content: '';
      border-bottom: 1px solid $primary-color;
    }

    &:hover {
      border-color: $hover-color;
    }
  }
}