如果存在特定的CSS类组合，则更改另一个类的CSS
如果存在特定的CSS类组合，则更改另一个类的CSS
提问于 2018-07-04 04:11:58
我还希望将"three“的背景颜色更改为"lightblue"，但前提是页面上存在类组合"one current”。注意："three“不能获得额外的类。我知道，你可以用JavaScript做到这一点，但是有没有原生的CSS解决方案呢？
下面是我的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.one.current {background-color: lightblue;}
</style>
</head>
<body>
<header>
<p class="one current">The first paragraph.</p>
</header>
<main>
<p class="two">The second paragraph.</p>
<p class="three">The third paragraph.</p>
<p class="four">The fourth paragraph.</p>
</main>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2018-07-04 04:54:04
如果您可以在header元素中设置类，而不是在其中设置p元素的类，则可以使用以下选择器组合来定位同级元素中的段落：
<!DOCTYPE html>
<html>
<head>
<style>
.one.current p {background-color: lightblue;}
.one.current + main > .three {background-color: lightblue;}
</style>
</head>
<body>
<header class="one current">
<p>The first paragraph.</p>
</header>
<main>
<p class="two">The second paragraph.</p>
<p class="three">The third paragraph.</p>
<p class="four">The fourth paragraph.</p>
</main>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51162215
复制相关文章
相似问题
腾讯云开发者
