CSS中的条件？

Question

是否可以使用某种形式的条件？

用代码构建新的设计风格。

通常<h1>标签下面有一条小线。标签<h2>也可以，但是当<h1>存在 时，<h2>标签下面不应该有一行。

h1:after {
    display: block;
    content: "";
    background-color: green;
    height: 3px;
    border-radius: 6px;
    width:50px
}

h2:after {
    display: block;
    content: "";
    background-color: orange;
    height: 3px;
    border-radius: 6px;
    width:30px
}

<h1>H1 title</h1> 

<h2>So now this H2 title should not have a line since there is a h1 above it.</h2> 

Answer 1

只要两个标题共享相同的父元素，您就可以使用通用同级组合器。 ~

如果您只希望h2紧跟在后面的h1没有它，请改用相邻的同级组合器 +。

请注意，这:after是旧的 CSS 2.1 语法。请改用CSS3 ::after。

h1::after {
  display: block;
  content: "";
  background-color: green;
  height: 3px;
  border-radius: 6px;
  width: 50px
}

h2::after {
  display: block;
  content: "";
  background-color: orange;
  height: 3px;
  border-radius: 6px;
  width: 30px
}

h1~h2::after {
  display: none;
}

<div>
  <h1>H1 title</h1>

  <h2>So now this H2 title should not have a line since there is a h1 above it.</h2>
</div>

<div>
  <h2>So now this H2 title should have a line since there is no h1 above it.</h2>
</div>