<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)으로 렌더링합니다. 가장 가까운 자손이 무엇이든 렌더링 할 수 있도록 어떻게 만들 수 있습니까?브라우저가 가장 가까운 글꼴 색상 자손을 렌더링하도록합니다.
두 번째로 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>