锚点和常规链接 - 样式答案

【问题标题】：anchors and regular links - styling锚点和常规链接 - 样式
【发布时间】：2010-11-30 01:44:56
【问题描述】：

在我正在构建的网页中，我使用锚点来轻松导航。 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 颜色，灰色。当我将鼠标悬停在常规链接上时，它会加下划线，并且悬停在其中一个锚点上几乎不会改变任何内容。

【问题讨论】：

你到底想要什么？ - 如果你能用一两句话总结你的颜色/效果需求，那会有所帮助。例如：“最终，我希望所有锚点都是红色的，但如果它们没有 href 我希望它们是紫色的” - 或者其他什么 :)
同意，尚不清楚您要完成什么。为什么在拥有锚类时需要 [href] 位？
使用 [href] 而不是重新分类你的锚很好（对我来说很清楚），但我只想知道你想要什么作为颜色和风格的最终结果......然后我们可以为工作编写任何浏览器、最好的 CSS。
感谢您的澄清……这就是我的想法。请参阅下面的回复（并且不要在不需要时添加任意类：P）

标签： css xhtml internet-explorer-6

【解决方案1】：

尝试使用.text > a 来点击第二个链接。它只会命中.text 类的直接子级。

【讨论】：

有趣的功能，这个。遗憾的是，这并不能解决这个特定问题，但我确实学到了一些新东西 :) 谢谢！
是的，后来我意识到你真正追求的是什么。但我想我还是会让答案留下来。不过很高兴你喜欢它（：

【解决方案2】：

这里有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) */ }

【讨论】：

抱歉，这与 .text 选择器没有什么不同。

【解决方案3】：

删除“锚”类...我认为您想要的是：

.text 
{
    color: #000;
}

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

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

【讨论】：

宾果游戏，就是这样。我没有看到使用 h3 作为选择器的选项...谢谢 :)

【解决方案4】：

替换：

<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 在选择器的单个部分上支持多个伪类是什么感觉）

【讨论】：

我认为你错过了 100% 的重点......他希望页面中的锚点以允许导航......取出“a”标签有什么帮助？
令人惊讶的是，这确实有效。带有 id 的 h3 标签可以链接到......所以这确实更干净！从来不知道这个:)
我想把我的话记录在案:)

【解决方案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 元素内的 a 元素指定 CSS，如下所示：

.text 
{
    color: #000;
}

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

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

【讨论】：