Question

我想在网站上使用一组标准的按钮，无论它们写在什么内容（即提交，付费，去，拼写正确），但由于某种原因，我无法显示精灵图像。我的代码如下： HTML：

    <div id="iconic">
    Place Sprite button here <span><a class="button" href="#">Test</a></span>
    </div>

CSS：

    span.iconic a:link
    span.iconic a:visited
    {
    display: block;
background-image:url('images/an_nav_btn.jpg');
width: 150px;
height: 45px;
    }
    span.iconic a:hover
    {
background-position: 0 -50px;
}
    span.iconica a:active
    {
background-position: 0 -100px;
}

有关如何使用顶部文本显示此内容的任何建议（在这种情况下，它将包含带有“test”一词的按钮。

提前致谢。

Answer 1

在CSS中：

.用于为类名添加前缀

#用于为ID添加前缀。

您的元素是DIV，您在CSS中指定了SPAN。你有这两个混淆了。

<div id="iconic">

的CSS声明

将是：

#iconic {
    ...
}

您可能需要考虑查看Font Awesome，为您处理大量此事。

Answer 2

根据您发布的css，您试图使用“标志性”类操作跨度内的链接......这与您在html中的内容无关：

让你走上正轨，试试吧替换所有span.iconic 与#iconic span的

#iconic span a将<a>内的所有<span>转换为id为'iconic'的任何元素内的{{1}}“

CSS和Sprites用于标准按钮

2 个答案: