在CSS中使用when/else的方法

在CSS中，没有像编程语言中的"if/else"和"switch/case"这样的流程控制结构。但是我们可以通过一些技巧和CSS的一些基本属性来实现类似于“when/else”的效果。

一、使用:root和变量

要实现“when/else”的效果可以使用:root伪类和CSS变量。:root会匹配文档根元素,并且我们可以在这里定义一些全局的CSS变量。不同的变量值可以用于不同的情况。

例如，我们要设置一个按钮组件的颜色，当鼠标悬停在按钮上时，按钮颜色变为蓝色，当用户点击按钮后，按钮颜色变为绿色。我们可以这样实现：

:root{
  --btn-color: red;
}

.btn{
  background-color: var(--btn-color);
  /* 其他样式 */
}

.btn:hover{
  --btn-color: blue;
}

.btn:active{
  --btn-color: green;
}

在这个示例中，我们在:root中定义了变量--btn-color，并将其初始值设为红色。当鼠标悬停在按钮上时，我们使用:hover伪类来更改--btn-color的值，使按钮背景色变为蓝色。当用户点击按钮时，我们使用:active伪类来更改--btn-color的值，使按钮背景色变为绿色。

二、使用:checked和相邻兄弟选择器

:checked伪类可以匹配被选中的状态的input元素，相邻兄弟选择器可以选择一个元素的下一个兄弟元素。这两个选择器可以用于创建一个类似于“when/else”的效果，例如：

/* 初始状态 */
.textbox + .submit-btn{
  display: none;
}

/* 输入框不为空时显示提交按钮 */
.textbox:not(:empty) + .submit-btn{
  display: block;
}

/* 输入框为空时隐藏提交按钮 */
.textbox:empty + .submit-btn{
  display: none;
}

在这个示例中，我们有一个输入框和一个提交按钮，当输入框不为空时，提交按钮显示出来，当输入框为空时，提交按钮隐藏起来。我们使用:not(:empty)选择器来选中输入框不为空的情况，并使用相邻兄弟选择器来控制提交按钮的显示和隐藏。

这两种方法可以用于创建类似if/else逻辑的效果，提高CSS的灵活性和可维护性。