Select target="_blank" 当 img 不是 child

Question

我有以下样式设置来将图标应用到外部链接，但我遇到了一个问题，即它应用于作为锚标记 child 的图像，这是我不想要的。

a:not(.btn) {
  &[target="_blank"] {
    &:after {
       // The styles I want to apply
    }
  }
}

我尝试使用以下 img:not(:first-child) 选择器来包装块，但它似乎没有达到我想要的效果。

a:not(.btn) {
  &[target="_blank"] + img:not(:first-child) {
    &:after {
       // The styles I want to apply
    }
  }
}

调整此代码的正确方法是什么，它将正确应用于任何带有 target="_blank" 的锚标记，但不适用于 img 标记为 child 的锚标记。

Answer 1

您正在尝试做的是根据其子项定位父项，而这在 CSS 中是不可能的。您需要使用 JS 或 JQuery。查看这些答案以获得更详细的建议。

Set parent style via child 或 Is there a CSS parent selector?

Answer 2

如果您愿意添加一点 javascript，您可以通过以下方式相对直接地实现您想要的效果：

将 class 添加到所有具有 target="_blank"
从图像元素的所有个父节点中删除相同的class（您刚刚添加的那个）

工作示例：

// GET ALL THE ANCHORS WITH target="_blank"
const anchorTargetBlanks = [...document.querySelectorAll('[target="_blank"]')];

// ADD A CLASS TO ALL SUCH ANCHORS
anchorTargetBlanks.forEach(anchor => anchor.classList.add('link-contains-no-image'));

// REMOVE THAT CLASS FROM THE PARENT NODE OF EACH IMAGE
[...document.images].forEach((image) => {
  
  if (image.parentNode.getAttribute('target') === '_blank') {
    image.parentNode.classList.remove('link-contains-no-image');
  }

});

ul {
  padding-left: 0;
}

li {
  margin: 1px;
}

img {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  background-color: rgb(0, 0, 191);
  vertical-align: middle;
}

.link-contains-no-image {
  display: block;
  padding: 6px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
}

<ul>
<li><a href="https://example.com/" target="_blank">Link 1</a></li>
<li><a href="https://example.com/" target="_blank"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'/%3E" alt="Image for Link 2" />Link 2</a></li>
<li><a href="https://example.com/" target="_blank">Link 3</a></li>
<li><a href="https://example.com/" target="_blank">Link 4</a></li>
<li><a href="https://example.com/" target="_blank"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'/%3E" alt="Image for Link 5" />Link 5</a></li>
<li><a href="https://example.com/" target="_blank">Link 6</a></li>
</ul>

Select target="_blank" 当 img 不是 child

Select target="_blank" when img is not a child

css

less