不同顏色的多個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; 
}