如何組合:: after和：not pseudo選擇器

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