"if"语句的 CSS 等价物

Question

有什么方法可以在 CSS 中使用条件语句吗？

Answer 1

我想说 CSS 中最接近“IF”的是媒体查询，例如可用于响应式设计的媒体查询。对于媒体查询，您是在说“如果屏幕宽度在 440 像素到 660 像素之间，则执行此操作”。在此处阅读有关媒体查询的更多信息:http://www.w3schools.com/cssref/css3_pr_mediaquery.asp ，下面是它们的外观示例:

@media screen and (max-width: 300px) {
  body {
     background-color: lightblue;
  }
}

除了转移到 SASS/SCSS(如上所述)之外，这几乎就是 CSS 中“IF”的范围。

我认为最好的办法是在脚本语言中更改类/ID，然后在 CSS 中处理每个类/ID 选项。例如，在 PHP 中，它可能类似于:

<?php
  if( A > B ){
echo '<div class="option-a">';
} 
    else{
echo '<div class="option-b">';
}
?>

那么你的 CSS 可以是这样的

.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}