我正在尝试改善WordPress网站上的可访问性，其中样式表中缺少“焦点”。
我理解如何设置文本链接的样式，但我似乎无法将相同的内容应用于图像链接。我想在聚焦时在图像下面加一条虚线。
这就是我所说的 - 非常简单：
a img:hover {border-bottom: 3px dashed #000;}
a img:focus {border-bottom: 3px dashed #000;}
它适用于悬停，但不是焦点！
有什么想法吗？
答案 0 :(得分：2)
用户代理通常不会将img元素视为接受焦点。来自the w3 CSS spec：
：当一个元素具有焦点时，应用focus伪类 （接受键盘事件或其他形式的文本输入）。
您可以通过添加tabindex属性（img）来启用对<img src="foo.png" tabindex="0" alt="photo of foo">元素的关注，但除非您有某些特定原因，否则我不建议您这样做。除非元素实际上接受键盘输入，否则将其添加到Tab键顺序会给AT用户带来任何好处（事实上，可能会让人感到困惑）。
答案 1 :(得分：0)
只需将伪类移动到a元素：
a:hover img {border-bottom: 3px dashed #000;}
a:focus img {border-bottom: 3px dashed #000;}