<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 之后，所以浏览器将 TEST COLOR 呈现为白色 (#fff)。我怎样才能使它呈现最接近的后代？
您可以使用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>我赞同 Vivek 的建议。两者的规则.f-2 a和.f-1 a具有相同的特异性。因此，您必须制定TEST COLOR更具体的适用规则。你可以试试.f-1 > a或.f-2 .f-1 a。