如何将焦点设置在锚标签的文本剔除css背景图像上？

Question

我使用了以下CSS将焦点设置在锚标签上：

a:focus
{
outline: 1px dotted black;
}

因为我已经在css中使用背景图像来显示pdf图标( pdf -icon.png)，然后再下载pdf文件的链接。当标签焦点出现时，它选择带有pdf-icon.png图像的锚定标签的文本。我的CSS显示pdf图标图像如下：

a.pdf-link
{
line-height: 30px;
background: url(../Images/pdf-icon.png) no repeat;
text-decoration: none;
padding: 4px 0px 4px 26px;
}

但我只想将焦点放在Anchor tag的文本上，即'pdf-icon.png‘，不希望焦点在'DownLoad -icon.png’图像上。

我在.aspx页面上的代码如下：

<div>
<a class="pdf-link" href="http://example.com/a.pdf" target=" _blank" shape=""> Download PDF </a>
</div>

有人能帮我解决这个问题吗？

Answer 1

使用更具表现力的选择器，例如：

.pdf-link:focus
{
outline: 1px dotted black;
}