CSS中是否支持条件判断？如何实现h1存在时h2不显示下装饰线

解决方案 #

CSS内置了多种选择器可以实现你需要的「条件判断」效果，不需要额外引入脚本逻辑，针对你的需求可以用**后续兄弟选择器（~）**实现：
你只需要在现有CSS代码的基础上新增如下规则即可：

/* 匹配所有和h1同属一个父元素、且位于h1之后的h2，隐藏其装饰线 */
h1 ~ h2::after {
  display: none;
}

规则说明 #

• ~ 是CSS后续兄弟选择器，作用是选中同一个父容器内，指定元素之后所有符合条件的同级元素
• 如果你只需要隐藏紧跟在h1后面的第一个h2的装饰线，可以把选择器换成相邻兄弟选择器h1 + h2::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;
}

<!-- 场景1：存在h1，后面的h2无装饰线 -->
<h1>H1 title</h1> 
<h2>此时这个H2标题上方存在h1标签，不显示下方的装饰线</h2>

<!-- 场景2：不存在h1，h2正常显示装饰线 -->
<h2>当前位置上方没有h1标签，正常显示装饰线</h2>

内容的提问来源于stack exchange，提问作者Lucas