同じ特異性を持つCSSセレクタをHTMLタグの親子関係の順に適用する方法は？

Question

同じレベルのCSSスタイルの束があります：

.style1 a { 
    color: red; 
} 
.style2 a { 
    color: green; 
} 

はまた、それらのスタイルが適用されるネストされたブロックでのHTMLコードがあります：その結果、第2のリンクとして

<div class="style2"> 
    <span> 
     <a href="/">Style 2</a> 
    </span> 
    <div class="style1"> 
     <div> 
      <a href="/">Style 1</a> 
     </div> 
     <div class="style2"> 
      <a href="/">Style 2</a> 
     </div> 
    </div> 
</div> 

（«スタイル1»）は緑になります。これは、リンクタグが両方のCSSセレクタに対して同じ特異性を持ち、.style2 aが後で宣言されたために発生します。したがって、.style2 aが適用されます。

タグのネストに関する予備的な情報なしで、最も近いスタイルクラスの親からスタイルを適用する方法（2番目のリンクを赤くする）？

コードの遊び場：http://codepen.io/anon/pen/zvXmOw

HTMLはを修正することが可能です。しかしリンクがどこにあってもよいと考えてください。

----------

私が見つけた最良の解決策は、制限ネストに基づいています。まず（スタイル - 親からのリンクタグまでの距離が限られている）：

<style> 
.style1 > a, 
.style1 > :not(.style) > a, 
.style1 > :not(.style) > :not(.style) > a { 
    color: red; 
} 
.style2 > a, 
.style2 > :not(.style) > a, 
.style2 > :not(.style) > :not(.style) > a { 
    color: green; 
} 
</style> 
<div class="style style2"> 
    <span> 
     <a href="/">Style 2</a> 
    </span> 
    <div class="style style1"> 
     <div> 
      <a href="/">Style 1</a> 
     </div> 
     <div class="style style2"> 
      <a href="/">Style 2</a> 
     </div> 
    </div> 
</div> 

セカンド（スタイルのdivのネストが制限されている）：

<style> 
.style1 a, 
.style .style1 a, 
.style .style .style1 a { 
    color: red; 
} 
.style2 a, 
.style .style2 a, 
.style .style .style2 a { 
    color: green; 
} 
</style> 
<div class="style style2"> 
    <span> 
     <a href="/">Style 2</a> 
    </span> 
    <div class="style style1"> 
     <div> 
      <a href="/">Style 1</a> 
     </div> 
     <div class="style style2"> 
      <a href="/">Style 2</a> 
     </div> 
    </div> 
</div> 

私が見つけることを試みている限界withounよりよい解決策があります。

Answer 1

HTMLタグの親子順に同じ特異性のCSSセレクタを作成するにはどうすればよいですか？

できません。 CSSは単純にそのようには機能しません。セレクタが等しい特異性を持つ場合、ルールはスタイルシート順に適用されます。あなたはそれを変更することはできません。

color: inheritでリンク上の効果を得たり、クラスのメンバーである要素の色を設定することができます。

おそらく、アンカーのクラスを直接設定する方が簡単でしょう。

Answer 2

これは定義の問題です。彼の子供を適用するために.green classnameでdivを作るリンク.greenを作る方が良いです。良いCSSのプラクティスでは、これを作る方が良いと言われています。

<a href="" class="green">Green link</a> 
<a href="" class="red">Red link</a> 

ここで重要なことはありません。特定のスタイルがリンクのために作られている場合は、そのための良いコードを書いてみませんか？

Answer 3

最高のは、おそらくそのようなスパンとdiv要素を削除するには、次のようになります。

<div class="style2"> 
    <a href="/">Style 2</a> 
    <div class="style1"> 
     <a href="/">Style 1</a> 
    <div class="style2"> 
     <a href="/">Style 2</a> 
    </div> 
</div> 

をしてから、このCSSを使用します。

.style1 > a { 
    color: red; 
} 
.style2 > a { 
    color: green; 
} 

フィドル：http://jsfiddle.net/09c6x5pp/

EDIT：

スパンとdivを保持したい場合：

.style1 > a, 
.style1 > div > a { 
    color: red; 
} 
.style2 > a, 
.style2 > span > a { 
    color: green; 
} 

Answer 4

それはCSS variablesを使用して達成することができます。

a { 
 
    color: var(--link-color); 
 
} 
 
.style1 { 
 
    --link-color: red; 
 
} 
 
.style2 { 
 
    --link-color: green; 
 
}

<div class="style2"> 
 
    <span> 
 
     <a href="/">Style 2</a> 
 
    </span> 
 
    <div class="style1"> 
 
     <div> 
 
      <a href="/">Style 1</a> 
 
     </div> 
 
     <div class="style2"> 
 
      <a href="/">Style 2</a> 
 
     </div> 
 
    </div> 
 
</div>

残念ながら、この技術は広く、十分なブラウザでサポートされていません。 Can I useによると、ユーザーの87％がそれをサポートしています。