Question

我有点像CSS菜鸟。

我正在尝试创建一个规则，以确保位于<h3>标记内的所有html锚点都不会显示下划线（并显示其他一些颜色属性）。这就是我所拥有的，但它不起作用：

<h3><a href="#">Turn of underline etc</a></h3>

h3 a, a:active, a:visited a:hover {
    text-decoration:none;
    color:#000000;
}

Answer 1

这应该这样做：

h3 a {
    text-decoration:none;
    color:#000;
}

现场演示： http://jsfiddle.net/simevidas/7A2JX/

Answer 2

您可以执行以下操作。

当h3中的超链接与mousy一起盘旋时执行此操作。

h3 a:hover {
    color: #FFFF20;
}

这对于实际样式（当没有悬停时），文字装饰应该带走你的下划线。

h3 a {
    text-decoration: none;
    color: #EBE6C8;
}

Answer 3

根据您的代码，您需要使用h3四次，所以

h3 a, h3 a:active, h3 a:visited, h3 a:hover {
    text-decoration:none;
    color:#000000;
}

现在的方式，活动，访问和悬停状态不适用于h3“具体”

Answer 4

您在访问后错过了逗号。

Answer 5

如果您想避免冲突或覆盖其他锚标记。最好添加一个类属性。如果您不想添加类，请确保您添加的CSS在具有相同标记的其他CSS之后调用。

带有类

的示例代码

CSS

h3 a.someClass {
    text-decoration: none;
    color: #000000;
}

//If you want style on hover do something like this
a:hover.h3-anchor {
    color:#FF0000;
}

HTML

<h3><a class="someClass" href="#">Some Text</a></h3>

根据您对Sime的评论，我不确定为什么它会覆盖锚标签样式分开的地方。它会覆盖，除非你做这样的身体a {}或其他你的＆lt; a＆gt;在里面。

Answer 6

此外，如果您反对总体风格（为标准标签设置的样式），您可能需要添加＆＃34;！important＆＃34;你要改变的标签。

使用您的示例：

<h3><a href="#">Turn of underline etc</a></h3>

h3 a {
    text-decoration:none !important;
    color:#000000;
    }

希望这有帮助！

嵌套CSS元素（在标题中设置样式链接）

6 个答案: