Question

我还想将“三个”的背景色更改为“浅蓝色”，但前提是页面上存在类组合“一个当前”。注意：“三个”不能再上其他课。我知道，您可以使用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>

Answer 1

根据您的情况，您可以在.one.current中使用<header>

然后使用以下样式设置.three： .one.current ~ main .three

标题中的<p>元素包括： .one.current p

有关~运算符的文档：general sibling selector (MDN)。

Answer 2

如果您可以为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>

如果存在特定的CSS类组合，请更改另一个类的CSS

2 个答案: