CSS等效于"if"语句

Question

有没有办法在CSS中使用条件语句？

Answer 1

我会说CSS中与"IF"最接近的是媒体查询,例如那些可用于响应式设计的查询.对于媒体查询,您会说"如果屏幕宽度介于440px和660px之间,请执行此操作".在这里阅读有关媒体查询的更多信息:http://www.w3schools.com/cssref/css3_pr_mediaquery.asp,以下是它们的外观示例:

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

这几乎是CSS中"IF"的范围,除了转移到SASS/SCSS(如上所述).

我认为您最好的选择是在脚本语言中更改您的类/ 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;
}

Answer 2

不,但你能举个例子吗？你想检查什么条件？

也许萨斯或指南针对你很有意思.

来自Sass的报价:

Sass让CSS再次变得有趣.Sass是CSS,加上嵌套规则,变量,mixins等等,所有这些都是简洁易懂的语法.

Answer 3

CSS 本身没有条件语句，但这里有一个涉及自定义属性（又名“css 变量”）的 hack。

在这个简单的示例中，您希望根据特定条件应用填充，例如“if”语句。

:root   { --is-big: 0; }

.is-big { --is-big: 1; }

.block {
  padding: calc(
    4rem * var(--is-big) +
    1rem * (1 - var(--is-big))
  );
}

因此，任何.block一个.is-big或一个的后代都将有 4rem 的填充，而所有其他块将只有 1rem。现在我称之为“微不足道”的例子，因为它可以在没有 hack 的情况下完成。

.block {
  padding: 1rem;
}

.is-big .block,
.block.is-big {
  padding: 4rem;
}

但我将把它的应用留给你的想象力。

Answer 4

CSS中唯一可用的条件是选择器和@media.有些浏览器支持一些CSS 3选择器和媒体查询.

如果元素与选择器匹配(或者通过添加新类),则可以使用JavaScript修改元素以进行更改.

Answer 5

所述@supports规则（92％浏览器支持2017七月）规则可以用于对CSS属性条件逻辑：

@supports (display: -webkit-box) {
    .for_older_webkit_browser { display: -webkit-box }
}

@supports not (display: -webkit-box) {
    .newer_browsers { display: flex } 
}