CSS中的if/else条件

给定一个 HTML 文件，我们需要在 CSS 中使用 if-else 条件进行应用。

不，我们不能在 CSS 中使用 if-else 条件，因为 CSS 不支持逻辑。但是我们可以使用下面讨论的 if-else 的一些替代方法：

方法 1：在此方法中，我们将使用 HTML 文件中的类来实现此目的。我们将根据要在 CSS 中应用的条件定义不同的类名。

• 假设我们想根据行号改变文本的颜色，那么 if-else 条件将是：

  if(line1){
     color : red;
  }else{
     color : green;
  }

• 通过使用上面讨论的方法，我们将创建类，然后在其中应用 CSS：

  .color-line1{
     color : red;
  }
  .color-line2{
     color : green;
  }
  

因此，上述类将仅对使用这些类的 HTML 标签执行。

例子：

 
  
 
     
      
    
    
 
  
 
  
    
 
        GeeksforGeeks 
    
 
  
    
 
        If-else condition in CSS
    
    This is first line
    


    This is second line
  
 
  
 
                                     

输出：

方法二：我们可以使用像SASS这样的CSS预处理器，它允许我们在其中编写条件语句。即使您使用 SASS，您也必须预处理您的样式表，这意味着在编译时评估条件，而不是在运行时。

句法：

$type: line;
p {
  @if $type == line1 {
    color: blue;
  } @else if $type == line2 {
    color: red;
  } @else if $type == line3 {
    color: green;
  } @else {
    color: black;
  }
}

要了解有关 SASS 的更多信息，请单击此处
要阅读 SASS 中的 if-else，请单击此处