CSS等效于“if”语句

时间：2010-03-15 11:48:26

标签： css

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

13 个答案:

答案 0 :(得分：19)

我认为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;
}

答案 1 :(得分：15)

没有。但是你能举个例子吗？您要查看条件的内容？

可能Sass或Compass对你很有意思。

Sass引用：

  

Sass让CSS再次变得有趣。 Sass是CSS，加上嵌套的规则，变量，mixins等等，都是简洁易懂的语法。

答案 2 :(得分：5)

CSS中唯一可用的条件是selectors和@media。有些浏览器支持部分CSS 3 selectors和media queries。

如果元素与选择器匹配（或者通过添加新类），则可以使用JavaScript修改元素以进行更改。

答案 3 :(得分：4)

@supports规则（2017年7月浏览器支持率为92％）规则可用于css属性的条件逻辑：

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

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

答案 4 :(得分：1)

css文件不支持条件语句。

如果你想要看到两种方式中的一种，根据某些条件，使用你的服务器端脚本语言或javascript给它一个合适的类。例如

<div class="oh-yes"></div>
<div class="hell-no"></div>

答案 5 :(得分：1)

CSS没有原生的IF / ELSE可用。像SASS（和Compass）这样的CSS预处理器可以提供帮助，但是如果您正在寻找更多特定于功能的if / else条件，那么您应该尝试Modernizr。它进行特征检测，然后将类添加到HTML元素中以指示哪个CSS3＆amp; HTML5具有浏览器支持和不支持的功能。然后，您可以在CSS中直接编写if / else-like CSS而无需任何预处理，如下所示：

.geolocation #someElem {
   /* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
   /* only apply this if the browser DOES NOT support Geolocation */
}

请记住，你应该总是逐步增强，所以你应该写一些更像这样的内容，而不是上面的例子（更好地说明了这一点）：

#someElem {
   /* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
   /* only properties as needed to overwrite the default styling  */
}

请注意，Modernizr确实依赖于JavaScript，因此如果禁用JS，您将无法获得任何内容。因此，首先是#someElem的渐进增强方法，作为no-js基础。

答案 6 :(得分：1)

我认为你可以在CSS中使用if语句。虽然他们没有这样的措辞。在下面的示例中，我已经说过，如果选中复选框，我希望将背景更改为白色。如果您想查看一个有效的示例，请查看www.armstrongdes.com。我为客户建了这个。重新调整窗口大小，以便移动导航接管并单击导航按钮。所有CSS。我认为这个概念可用于许多事情是安全的。 

     #sidebartoggler:checked + .page-wrap .hamb {
        background: #fff;
      }

// example set as if statement sudo code.

if (sidebaretoggler is checked == true) {
set the background color of .hamb to white;
}

答案 7 :(得分：0)

您的样式表应该被视为html文档可以根据您需要显示的内容调用的可用变量的静态表。逻辑应该在你的javascript和html中，如果你真的需要，使用javascript根据条件动态应用属性。样式表不适合逻辑。

答案 8 :(得分：0)

CSS本身没有条件语句，但这里是a hack involving custom properties（a.k.a。“css variables”）。

在这个简单的示例中，您希望基于某种条件（如“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。现在我称之为“微不足道”的例子，因为它可以在没有黑客的情况下完成。

.block {
  padding: 1rem;
}

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

但我会把它的应用程序留给你的想象力。

答案 9 :(得分：0)

将css文件更改为scss文件将使您可以完成此操作。 Angular中的一个示例是使用ngClass，而您的scss将如下所示：

Message: Can't load the profile. Possible firefox version mismatch. You must use GeckoDriver instead for Firefox 48+. Profile Dir: /tmp/tmpxMUUcF If you specified a log_file in the FirefoxBinary constructor, check it for details.

Traceback (most recent call last):
  File "SeleniumDebugExample.py", line 50, in <module>
    driver = webdriver.Firefox(options=options, executable_path='/srv/main/geckodriver', capabilities=capabilities)
  File "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/firefox/webdriver.py", line 191, in __init__
    self.binary, timeout)
  File "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/firefox/extension_connection.py", line 52, in __init__
    self.binary.launch_browser(self.profile, timeout=timeout)
  File "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/firefox/firefox_binary.py", line 73, in launch_browser
    self._wait_until_connectable(timeout=timeout)
  File "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/firefox/firefox_binary.py", line 114, in _wait_until_connectable
    % (self.profile.path))
WebDriverException: Message: Can't load the profile. Possible firefox version mismatch. You must use GeckoDriver instead for Firefox 48+. Profile Dir: /tmp/tmpxMUUcF If you specified a log_file in the FirefoxBinary constructor, check it for details.

答案 10 :(得分：0)

多年来，CSS已成为非常强大的工具，并且它具有许多JavaScript可以做的事情的黑客手段

CSS中有一个使用条件语句/逻辑的技巧。

它涉及使用符号“〜”

让我进一步举例说明。

假设您希望在单击按钮时将背景滑入页面。您需要做的就是使用单选框。 在按钮下方设置收音机标签的样式，以便在按下按钮时也选中复选框。

然后您使用下面的代码

.checkbox:checked ~ .background{
opacity:1
width: 100%
}

此代码仅声明如果选中此复选框，然后打开后台ELSE，则保持原样。

答案 11 :(得分：0)

虽然这感觉有点像黑客，并且可能无法在所有浏览器中完美运行，但我最近使用的一种方法结合了 CSS（至少在 Chrome 中）似乎忽略了属性上设置的无效值的事实，我们可以设置在无效时回退到默认值的自定义属性。

（注意：我没有对此进行深入测试，因此将其视为概念/可能想法的 hacky 证明）

以下是用 SCSS 编写的，但在标准 CSS 中应该也能正常工作：

...
object IMultiValueConverter.Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
    foreach (var v in values)
        if (v is null)
           return DependencyProperty.UnsetValue;
    var panel = (Panel)values[0];
    var scrollviewer = (ScrollViewer)values[1];

    Point relativeLocation = panel.TranslatePoint(new Point(0, 0), scrollviewer);
        var width = scrollviewer.ViewportWidth - relativeLocation.X;

    return width;
}
...

我正在从 JavaScript/React 设置自定义属性，但无论您如何设置它都可能会起作用：

.hero-image {
    // CSS ignores invalid property values
    //   When this var is set to an image URL, the browser will ignore it
    //   When this var isn't set, then we will use the default fallback for the var, which is 'none'
    display: var(--loading-page-background-image, none);

    // This part isn't directly relevant to my 'if' example, but shows how I was actually using this custom property normally
    background-image: var(--loading-page-background-image, none);
}

当 // 'true' case const chosenLoaderUrl = "https://www.example.com/loader.png"; // 'false' case //const chosenLoaderUrl = ""; // containerRef is just a reference to the div object, you could get this with // jquery or however you need. Since I'm in React, I used useRef() and attached // that to my div containerRef.current.style.setProperty( "--loading-page-background-image", `url(${chosenLoaderUrl})` ); 设置为我的 url 时，该 url 是 chosenLoaderUrl 属性的无效值，因此它似乎被忽略了。

当 display 设置为空值时，它会回退到我的 chosenLoaderUrl 语句中的默认值，因此将 var() 设置为 display

我不确定这个概念有多“通用”，但我想我会把它添加到其他建议中，以防它对任何人有用。

答案 12 :(得分：-1)

如果在CSS中你不能做，但你可以选择你将使用哪种样式表

以下是一个例子：

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

仅用于IE 6这里是来自http://www.quirksmode.org/css/condcom.html的网站，只有IE有条件评论。其他浏览器没有，虽然有些属性可以用于以-moz开头的Firefox或者以-webkit开头的safari。您可以使用javascript来检测您正在使用哪个浏览器，如果您想要执行任何操作，则使用javascript，但这是一个坏主意，因为它可以被禁用。

相关问题
最新问题