html - 多个具有不同颜色的 href

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 .

有没有更好的写法？

谢谢。

Answer 1

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

考虑以下几点:

a {
  color: blue;
}

p {
  color:red;
}

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

请注意，虽然您设置了 <p>使用红色，内部 <a>元素的颜色将优先。

您可以通过定义更具体的选择器来覆盖该颜色，如下所示:

a {
  color: blue;
}

p a {
  color: red;
}

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

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

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