<a> contains <img/></a>时不显示[href $ =“。xyz”]

Question

我有很多超链接，如：

<a href="file.pdf">File</a>

我使用CSS在这些链接中的每一个之后加上单词PDF，如下所示：

a[href$=".pdf"]:after {
content: "(pdf)"; 
font-size: 10px; 
color: #666; 
padding-left: 5px; 
vertical-align: 6%;
}

这适用于文本超链接，但我不希望“（pdf）”显示超链接图像，例如：

<a href="file.pdf"><img src="" alt=""></a>

这里有什么建议吗？

Answer 1

使用以下css规则：

a[href$=".pdf"] :not(img):after {
   content: "(pdf)";
   font-size: 10px;
   color: #666;
   padding-left: 5px;
   vertical-align: 6%;
}

在这里查看JSFiddle： http://jsfiddle.net/eh4jQ/4/

Answer 2

假设您只想在锚点之后附加文本，而不是孩子：我认为没有办法根据子项更改父项样式，因此您可以将类添加到具有图像的锚点？

尝试以下HTML：

<a href="file.pdf" class="someClass"><img src="" alt=""></a>
<a href="file.pdf" >File</a>

以下CSS：

a[href$=".pdf"]:not(.someClass):after {
    content: "(pdf)";
    font-size: 10px;
    color: #666;
    padding-left: 5px;
    vertical-align: 6%;
}

这应该只将:after伪元素添加到没有someClass的锚点