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

【问题标题】：How to combine the ::after and :not pseudo selectors如何组合 ::after 和 :not 伪选择器
【发布时间】：2015-09-18 07:27:07
【问题描述】：

我有以下 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;
    }
  }
}

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

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

【问题讨论】：

我很确定这会很难（ish）毕竟你是在设计链接而不是图像。您可能需要重新考虑您的方法。
它的&:after，而不是&::after
@Brewal：两者都是。其实the latter is now preferred.
@BoltClock 好吧没关系...为什么后者更好？（好的，谢谢你的链接）
确实可以有a way 来隐藏边框，但它使代码在IMO 上相当难看。

标签： css sass

【解决方案1】：

也许这会对你有所帮助。

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;
  }
}

快速 Codepen 示例： http://codepen.io/vkjgr/pen/WvMGRK

【讨论】：

【解决方案2】：

目前 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;
    }
  }
}

【讨论】：