可能是一个相当简单的CSS问题

Question

我有这个CSS规则来获得按下链接的“下推”效果：

a:active {
    position: relative;
    top: 1px;
}

现在这可以按预期工作了，但我想编写一个规则来禁用链接图像上的这个：

<a href="#"><img src="..." /></a>

有可能吗？

感谢。

Answer 1

您可以撤消对孩子的影响：

a:active img {
    position: relative;
    top: -1px;
}

Answer 2

我相信你可以将你的初始风格改为：

a {
    padding-bottom: 1px;
}

a:active {
    padding-top: 1px;
    padding-bottom: 0;
}

然后将其用于图像：

a:active img {
    position: relative;
    top: -1px;
}

还没有机会测试它，但我认为应该这样做。

Answer 3

我没试过这个，但我认为它应该有效。

a:active {
    position: relative;
    top: 1px;
}

a:active img{
    position: relative;
    top: -1px;
}

另一种解决方案是将类添加到包含图像的所有a标记

Answer 4

不幸的是，还没有一个选择器可以将仅文本链接与图像链接区分开来。但是你可以逃脱这个：

p a:active {
    position: relative;
    top: 1px;
}

如果您的链接都包含在段落标记中，则此功能将起作用，并且不会影响您的图片代码。您可以为需要包含的任何标签为H1，H2等创建一个。