如何组合 ::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;
    }
  }
}

我在这里所做的是为所有 link 添加蓝色底部边框。但是，我注意到当我使用带有内部图像的锚标记时，图像也有边框（因为它也是 link）。现在，我的目标是仅将锚样式附加到文本 links。

到目前为止，我尝试过使用 :not(img)、将其与 [=12= 链接起来]、覆盖以前的规则等，但没有按预期工作。任何帮助将不胜感激。

Answer 1

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

您可以使用 jQuery 之类的东西将 class 添加到任何包含子图像的 link：

$('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;
    }
  }
}

Answer 2

也许这会对你有所帮助。

a {
  display: block;
  height: 2.5em;
  position: relative;
  &:after {
    border-bottom: thin solid blue;
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    width: 100%;
  }
  &:hover:after {
    border-bottom-color: red;
  }
  img {
    display: block;
    height: inherit;
    position: relative;
    z-index: 1;
  }
}

快速代码笔示例： http://codepen.io/vkjgr/pen/WvMGRK

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

How to combine the ::after and :not pseudo selectors

css

sass