複数の異なるhrefの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に与えられ、それはすべてのリンクが含まれており、divにもないpに与えられた場合、それが動作しない場合にのみ動作します。

これを書き込むより良い方法はありますか？

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>要素に赤色を適用する、すなわち

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="x1"><a href="#">Some Link</a></p> 

ようなクラスやIDを持っていpタグにネストされている場合は、タグに対処するために、このセレクタを使用することができます。

#x1 a:link { color: green; } 

（すなわちaタグの内部のIDを持つ要素x1

Answer 3

CSSのカスケード性のため、親に<p>スタイルを適用すると機能しません。設計上、アンカータグ（<a>）には、ブラウザのリソースに格納されているデフォルトスタイルシートのようなUser-Agent Stylesheetによって設定されたCSS属性があります（color）。アンカーの親にcolor: greenを適用すると、内のテキストは、<a>の中には緑色になります。 colorは継承されていますが、継承されたときにデフォルトスタイルをオーバーライドしないため、その要素に直接適用する必要があります。

私はあなたのユースケースについてはわかりませんが、スタイルを直接idに適用することは、必ずしも最善の方法ではありません。緑色にしたい<a>にclassを追加してみてください。このようなアンカーのデフォルトのスタイルを上書きします

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

あなたはまた、特異性を高めることができ、：：

#colorGreen a { 
    color: green; 
} 

また場合にあなたはそれがリンクした内容に基づいてアンカーを選択したい、属性セレクタを考えます