首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如果存在特定的CSS类组合,则更改另一个类的CSS

如果存在特定的CSS类组合,则更改另一个类的CSS
EN

Stack Overflow用户
提问于 2018-07-04 04:11:58
回答 1查看 3K关注 0票数 3

我还希望将"three“的背景颜色更改为"lightblue",但前提是页面上存在类组合"one current”。注意:"three“不能获得额外的类。我知道,你可以用JavaScript做到这一点,但是有没有原生的CSS解决方案呢?

下面是我的例子:

代码语言:javascript
复制
<!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>

EN

回答 1

Stack Overflow用户

发布于 2018-07-04 04:54:04

如果您可以在header元素中设置类,而不是在其中设置p元素的类,则可以使用以下选择器组合来定位同级元素中的段落:

代码语言:javascript
复制
<!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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51162215

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档