Question

我正在尝试压缩我的CSS，但我已经遇到了麻烦。我正在使用CSS背景替换图像的一些文本链接，具有简单的rollever效果。图像都是相同的高度（除了每个div中的1，第一个）所以我试图用2个CSS规则处理它们，一个用于所有这些规则，一个用于更大的第一个链接。这是一个例子：

<div id="div1" class="common">
    <a id="link0" class="big" href="link"></a>

    <a id="link1" href="link"></a>

    <a id="link2" href="link"></a>

    <a class="class1" href="link"></a>
    <a id="link3" href="link"></a>
</div>
<div id="div2" class="common">
    ...
</div>

等等。我使用以下CSS：

.class1
{
    background:url(images/pdf.png);
    display:block;
    height:38px;
    width:39px;
}

.common a:hover
{
    background-position:0 -38px;
}

.common a.big:hover
{
    background-position:0 -117px;
}

#div1
{
    background:url(images/bg1.png);
}

#link0
{
    background:url(images/big1.png);
    display:block;
    height:117px;
    width:964px;
}

#link1
{
    background:url(images/1_1.png);
    display:block;
    height:38px;
    width:425px;
}

#link2
{
    background:url(images/1_2.png);
    display:block;
    height:38px;
    width:425px;
}

#link3
{
    background:url(images/1_3.png);
    display:block;
    height:38px;
    width:425px;
}

问题是，这似乎并没有将background-position规则应用于带有ID的链接（＃link0，＃link1等），但它确实选择了一个不具有ID的链接有一个ID（.class1）。如果我将.common a:hover选择器更改为#div1 a:hover如果有效，但我必须为每个div设置一个规则，这与我尝试做的相反。

我做错了什么？我不能使用JQuery，它必须是纯CSS。

Answer 1

为此，你必须在你的ID link0，link1 等中定义 background-image 而不是背景等。这样写：

#link0
{
    background-image:url(images/big1.png);
}

#link1
{
    background-image:url(images/1_1.png);
}

#link2
{
    background-image:url(images/1_2.png);
}

#link3
{
    background-image:url(images/1_3.png);
}

无论ID如何，都要选择类中所有元素的出现位置

1 个答案: