Question

试图找到更多关于css伪类a：focus我试图调整一些代码。试过了

a:focus img {border:2px solid rgb(155, 205, 255);}

和

a:focus img {background:rgb(155, 205, 255);}

都没有工作。然而

a:hover img {background:rgb(155, 205, 255);}

在悬停时工作正常。有谁知道我做错了什么？莱斯

我正在使用Firefox，但是如果可能的话，希望这可以跨浏览器工作。我得到一个闪光但不像这个画廊那样稳定的边框： http://www.cssplay.co.uk/menu/gallery.html#nogo

Answer 1

~~如果您右键单击它而没有实际关注链接，那么它会改变吗？~~

Answer 2

您的选择器似乎很好。

几个问题：你使用的是什么浏览器？正如马特所说，你确定要关注这个标签吗？

Answer 3

如果您使用的是IE8，

注意：如果指定了:focus，则Internet Explorer 8（及更高版本）支持!DOCTYPE伪类。（来源：http://www.w3schools.com/CSS/pr_pseudo_focus.asp）

调查：看到您正在使用Firefox，请点击空白页并按键盘上的Tab，并使用以下CSS：

a:focus img {border:2px solid rgb(155, 205, 255); padding: 2px;}

查看是否有效，并进行适当的报告。

此外，<a>标记是否还有focus之外的其他伪类？

根据yoru示例http://www.cssplay.co.uk/menu/gallery.html#nogo提出的建议，他们就这样做了：

#container a.pics:focus img.thumb {border:1px solid #fc0}

你为什么不这样做？

a img:focus {border:2px solid rgb(155, 205, 255); padding: 2px;}

Answer 4

看起来点击链接会将您带到同一页面上的其他位置会导致该链接失去焦点。不是最优雅的解决方案，但我能想到的是javascript。

对于风格：

a.selected img{border:9px solid green}

然后是剧本：

<script type="text/javascript">
    var last = null;
    function select(element)
    {
        if(last != null)
            last.className = last.className.replace(/ selected/g, "");
        element.className += " selected";
        last = element;
    }
</script>

然后为每个缩略图链接添加一个onclick事件处理程序：

<li><a href="#pic1" onclick="select(this);"><img src="thumbs/whatever.jpg" alt="whatever" /></a></li>

Answer 5

尝试在标签上设置边框，而不是在其内部设置图像标签。

伪类a：焦点

5 个答案: