<style>.f-1, .f-1 a {
color: #fff;
}
.f-2, .f-2 a {
color: #000;
}</style>
<body class="f-2">
<ul class="f-1">
<li><a>TEST COLOR</a></li>
</ul>
</body>
cssのf-2がf-1に続くため、ブラウザはテストカラーを白（#fff）にします。どのようにしてそれが最も近い子孫であるかをレンダリングすることができますか？ブラウザに最も近いフォントカラーの子孫をレンダリングさせます。
私は2番目のVivekの提案です。 .f-2 aと.f-1 aの両方の規則には同じspecificityがあります。だから、具体的にTEST COLORに適用したいルールを作る必要があります。 .f-1 > aまたは.f-2 .f-1 aを試すことができます。
inherit機能を使用できます。これは親の財産を継承することができます。
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>