使用CSS将链接变成小圆圈

Question

我有以下的HTML代码：

<ul class="smenu">
<li class="smenuitem"><a href="http://ux.stackexchange.com/"></a></li>
<li class="smenuitem"><a href="http://area51.stackexchange.com/"></a></li>
<li class="smenuitem"><a href="http://www.webmasters.stackexchange.com/"></a></li>
</ul>

我想让链接看起来像直径为25px的圆形，因此我应用了以下CSS：

li.smenuitem a, li.smenuitem a:link:hover, li.smenuitem a:visited, li.smenuitem a:visited:hover, {
display: block;
width: 25px;
height: 25px;
border-radius: 25px;
background-color: #0000ff;
}

然而，这些链接根本没有出现。它们不是25px × 25px，并且它们没有圆角（它们不是圆形）。有人能告诉我错在哪里吗？

- user721010

Answer 1

您在选择器列表的结尾处放置了逗号（请查看）:

li.smenuitem a, li.smenuitem a:link:hover, li.smenuitem a:visited, li.smenuitem a:visited:hover, {

Versus：

li.smenuitem a, li.smenuitem a:link:hover, li.smenuitem a:visited, li.smenuitem a:visited:hover {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background-color: #0000ff;
}

http://jsfiddle.net/J2XTs/

- Jared Farrish

Answer 2

在a:visited:hover选择器的最后一个逗号后面删除它，我认为那是导致问题的原因。

- kevinAlbs