Question

在我正在构建的网页中，我使用锚点来轻松导航。 IE6中这些锚点的样式给我带来了一些麻烦。

<div class="text">
    <h3><a class="anchor" name="custom_name">Title</a></h3>
    Lorem ipsum <a href="otherpage.aspx">dolor</a> sit amet.
</div>

使用这个CSS：

.text 
{
    color: #000;
}

.text a[href] 
{
    color: #ea2026;  //red
}

.anchor, .anchor:hover
{
    color: #a9a18c;  //gray
    text-decoration: none;
}

在FF和IE7 +中，没问题。但在IE6中，链接是白色的（如正文选择器中所定义），因为它与.text a [href]有问题。当我删除[href]时，锚点在所有浏览器中变为红色（自然）。在Firefox中，悬停仍然会产生效果，但不会在IE中显示。

对于FF和IE6中的常规链接，有没有办法对锚点进行样式设置？显然，班级“锚”并没有多大帮助......

修改 - 抱歉，这就是我想要的：
所有常规链接都必须为红色（href）。所有的锚都必须是h3颜色，灰色。当我将鼠标悬停在常规链接上时，它会加下划线，并且悬停在其中一个锚点上几乎不会改变任何内容。

Answer 1

替换：

<h3><a class="anchor" name="custom_name">Title</a></h3>

使用：

<h3 class="fragment" id="custom_name">Title</h3>

它更短，并且不会与用于链接的样式混淆。

（或者，看看a:link:hover, a:visited:hover {}，但我不知道IE在选择器的单个部分上支持多个伪类是什么意思）

Answer 2

删除“锚”类......我想你想要的是这个：

.text 
{
    color: #000;
}

.text a
{
    color: #ea2026; /*red*/
}

.text h3 a, .text h3 a:hover
{
    color: #a9a18c; /*gray*/
    text-decoration: none;
}

Answer 3

尝试使用.text > a点击第二个链接。它只会击中.text班的直接孩子。

Answer 4

这是a:link：

a { /* styles for all anchors */ }
a:link, a:visited { /* styles only for links */ }
a:hover { /* styles that should only apply to hovered links (not anchors) */ }

Answer 5

两件事：

添加一个锚元素而不给它一个id将不会使导航更容易。它也不太可能有效。我想你想要的是拥有指向h3的ID的锚点。类似的东西：

<div class="linktotext">
<a href="#title1">Title</a>
</div>
<div class="text">
    <h3 id="title1">Title</h3>
    Lorem ipsum <a href="otherpage.aspx">dolor</a> sit amet.
</div>

现在，第一部分中的锚点链接到第二部分中的id。

其次，

要解决您的具体问题，您只需在a元素中指定h3元素的CSS，如下所示：

.text 
{
    color: #000;
}

.text a
{
    color: #ea2026;  //red
}

.text h3 a, .text h3 a:hover
{
    color: #a9a18c;  //gray
    text-decoration: none;
}

锚和常规链接 - 造型

5 个答案: