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

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

到目前为止，我尝试使用: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;
    }
  }
}

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

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

如何组合:: after和：not pseudo选择器

2 个答案: