不同颜色的多个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这是行不通的作品。

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

Thx。

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上的以下资源。

Answer 2

如果您的链接嵌套在p标签，它有一个类或ID喜欢

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

，您可以使用此选择解决标签：

#x1 a:link { color: green; } 

（即a标签里面元素与ID x1）

Answer 3

由于CSS的层叠特性，将样式应用于父代<p>时，它不起作用。通过设计定位标记（<a>）具有用户代理样式表填充的color CSS属性，该属性就像使用浏览器资源一起存储的默认样式表一样。当您将color: green应用到锚的父项时，您会注意到<p>内的文字，但不在<a>内的文字将呈绿色。虽然color是继承的，但它不会在继承时覆盖默认样式，因此您需要将其直接应用于元素。

我不确定您的用例，但直接将样式应用到id并不总是最好的方法。也许尝试添加一个class到你想要绿色的<a>。也可以考虑属性选择，如果你想基于它链接到选择锚：

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

您还可以提高特异性，这将覆盖锚的默认样式，像这样：

#colorGreen a { 
    color: green; 
}