Question

如何为多个a href使用两种或更多种颜色？例如：

    a {color: white;}
    #colorGreen {color: green;}

  <div id="navBar">
    <p><a id="colorGreen" href="home.html">home</a><a id="colorGreen" href="page1.html"> page1</a> page2</p>
    </div>

<div id="textDiv">
    <p><a href="link1.html">link1</a></p>
    <p><a href="link2.html">link2</a></p>
    <p><a href="link3.html">link3</a></p>
</div>

仅当id="colorGreen"被赋予a href时才有效，如果它被提供给包含所有链接的p，则无效div }}

有没有更好的方法来写这个？

THX。

Answer 1

如果您的链接嵌套在p标记中，该标记的类或ID类似于

<p id="x1"><a href="#">Some Link</a></p>

，您可以使用此选择器来处理标记：

#x1 a:link { color: green; }

（即a标记内标识为x1的元素

Answer 2

您的css已经定义任何<a>元素都会有白色。这意味着在上设置颜色不会影响其包含的<a>元素。

请考虑以下事项：

＆＃13;

a {
  color: blue;
}

p {
  color:red;
}

＆＃13;

<div id="textDiv">
  <p><a href="link1.html">link1</a></p>
</div>

＆＃13;

请注意，尽管您将设置为使用红色，但内部<a>元素的颜色优先。

您可以通过定义具有更多特异性的选择器来覆盖该颜色，如下所示：

＆＃13;

a {
  color: blue;
}

p a {
  color: red;
}

＆＃13;

<div id="textDiv">
  <p><a href="link1.html">link1</a></p>
</div>

＆＃13;

换句话说，将红色应用于作为<a>元素的子元素的任何元素。

请在css selectors和selector specificity上查看以下资源。

Answer 3

将样式应用于父时，它不起作用，因为CSS的级联性质。根据设计，锚标记（<a>）具有由用户代理样式表填充的color CSS属性，该属性类似于默认样式表，与浏览器的资源一起存储。当您将color: green应用于主播的父级时，您会注意到内部但<a>内部的文字不会显示绿色。虽然color是继承的，但它在继承时不会覆盖默认样式，因此您需要将其直接应用于元素。

我不确定您的用例，但直接将样式应用于id并不总是最好的方法。也许可以尝试将class添加到您希望看起来为绿色的<a>。还要考虑属性选择器，以防您想根据链接的内容选择锚点：

a[href=home] {
    color: green;
}

您还可以增加特异性，这将覆盖锚点的默认样式，如下所示：

#colorGreen a {
    color: green;
}

多个具有不同颜色的href

3 个答案: