等效于“if”语句的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2446812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Equivalent of the "if" statement
提问by BreakHead
Is there any way to use conditional statements in CSS?
有没有办法在 CSS 中使用条件语句？
采纳答案by Felix Kling
No. But can you give an example what you have in mind? What conditiondo you want to check?
不是。但是你能举例说明你的想法吗？您要检查什么条件？
Maybe Sassor Compassare interesting for you.
Quote from Sass:
来自 Sass 的引用：
Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.
Sass 再次让 CSS 变得有趣。Sass 是 CSS，加上嵌套规则、变量、mixin 等，所有这些都采用简洁易读的语法。
回答by Aaron Mannino
I'd say the closest thing to "IF" in CSS are media queries, such as those you can use for responsive design. With media queries, you're saying things like, "If the screen is between 440px and 660px wide, do this". Read more about media queries here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, and here's an example of how they look:
我会说 CSS 中最接近“IF”的是媒体查询，例如可用于响应式设计的那些。使用媒体查询时，您会说“如果屏幕宽度在 440 像素到 660 像素之间，请执行此操作”。在此处阅读有关媒体查询的更多信息：http: //www.w3schools.com/cssref/css3_pr_mediaquery.asp，这是它们外观的示例：
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
That's pretty much the extent of "IF" within CSS, except to move over to SASS/SCSS (as mentioned above).
这几乎是 CSS 中“IF”的范围，除了转移到 SASS/SCSS（如上所述）。
I think your best bet is to change your classes / IDs within the scripting language, and then treat each of the class/ID options in your CSS. For instance, in PHP, it might be something like:
我认为最好的办法是在脚本语言中更改类/ID，然后处理 CSS 中的每个类/ID 选项。例如，在 PHP 中，它可能是这样的：
<?php
if( A > B ){
echo '<div class="option-a">';
}
else{
echo '<div class="option-b">';
}
?>
Then your CSS can be like
那么你的 CSS 可以像
.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}
回答by Quentin
The only conditions available in CSS are selectorsand @media. Some browsers support some of the CSS 3 selectorsand media queries.
CSS 中唯一可用的条件是选择器和@media。一些浏览器支持一些CSS 3 选择器和媒体查询。
You can modify an element with JavaScript to change if it matches a selector or not (e.g. by adding a new class).
您可以使用 JavaScript 修改元素以更改它是否与选择器匹配（例如，通过添加新类）。
回答by The One and Only ChemistryBlob
The @supportsrule (92% browser support July 2017) rule can be used for conditional logic on css properties:
所述@supports规则（92％浏览器支持2017七月）规则可以用于对CSS属性条件逻辑：
@supports (display: -webkit-box) {
.for_older_webkit_browser { display: -webkit-box }
}
@supports not (display: -webkit-box) {
.newer_browsers { display: flex }
}
回答by chharvey
CSS itself doesn't have conditional statements, but here's a hack involving custom properties(a.k.a. "css variables").
CSS 本身没有条件语句，但这里有一个涉及自定义属性（又名“css 变量”）的 hack。
In this trivial example, you want to apply a padding based on a certain condition—like an "if" statement.
在这个简单的示例中，您希望根据特定条件应用填充，例如“if”语句。
:root { --is-big: 0; }
.is-big { --is-big: 1; }
.block {
padding: calc(
4rem * var(--is-big) +
1rem * (1 - var(--is-big))
);
}
So any .blockthat's an .is-bigor that's a descendant of one will have a padding of 4rem, while all other blocks will only have 1rem. Now I call this a "trivial" example because it can be done without the hack.
因此，任何.block一个.is-big或一个的后代都将有 4rem 的填充，而所有其他块将只有 1rem。现在我称之为“微不足道”的例子，因为它可以在没有 hack 的情况下完成。
.block {
padding: 1rem;
}
.is-big .block,
.block.is-big {
padding: 4rem;
}
But I will leave its applications to your imagination.
但我将把它的应用留给你的想象力。
回答by KuraFire
There is no native IF/ELSE for CSS available. CSS preprocessors like SASS(and Compass) can help, but if you're looking for more feature-specific if/else conditions you should give Modernizra try. It does feature-detection and then adds classes to the HTML element to indicate which CSS3 & HTML5 features the browser supports and doesn't support. You can then write very if/else-like CSS right in your CSS without any preprocessing, like this:
没有可用的 CSS 原生 IF/ELSE。像SASS（和 Compass）这样的 CSS 预处理器可以提供帮助，但是如果您正在寻找更多特定于功能的 if/else 条件，您应该尝试使用Modernizr。它进行功能检测，然后向 HTML 元素添加类以指示浏览器支持和不支持哪些 CSS3 和 HTML5 功能。然后，您可以直接在您的 CSS 中编写非常类似 if/else 的 CSS，而无需任何预处理，如下所示：
.geolocation #someElem {
/* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
/* only apply this if the browser DOES NOT support Geolocation */
}
Keep in mind that you should always progressively enhance, so rather than the above example (which illustrates the point better), you should write something more like this:
请记住，您应该始终逐步增强，因此，您应该编写更像这样的内容，而不是上面的示例（它更好地说明了这一点）：
#someElem {
/* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
/* only properties as needed to overwrite the default styling */
}
Note that Modernizr does rely on JavaScript, so if JS is disabled you wouldn't get anything. Hence the progressive enhancement approach of #someElem first, as a no-js foundation.
请注意，Modernizr 确实依赖于 JavaScript，因此如果禁用 JS，您将一无所获。因此，#someElem 首先采用渐进式增强方法，作为无 js 基础。
回答by Ardent780
I would argue that you can use if statements in CSS. Although they aren't worded as such. In the example below, I've said that if the check-box is checked I want the background changed to white. If you want to see a working example check out www.armstrongdes.com. I built this for a client. Re size your window so that the mobile navigation takes over and click the nav button. All CSS. I think it's safe to say this concept could be used for many things.
我认为您可以在 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;
}
回答by Rik Heywood
css files do not support conditional statements.
css 文件不支持条件语句。
If you want something to look one of two ways, depending on some condition, give it a suitable class using your server side scripting language or javascript. eg
如果您想根据某些条件以两种方式之一查看某些内容，请使用您的服务器端脚本语言或 javascript 为其提供合适的类。例如
<div class="oh-yes"></div>
<div class="hell-no"></div>
回答by dagoof
Your stylesheet should be thought of as a static table of available variables that your html document can call on based on what you need to display. The logic should be in your javascript and html, use javascript to dynamically apply attributes based on conditions if you really need to. Stylesheets are not the place for logic.
您的样式表应该被认为是一个可用变量的静态表，您的 html 文档可以根据您需要显示的内容调用这些变量。逻辑应该在您的 javascript 和 html 中，如果您确实需要，请使用 javascript 根据条件动态应用属性。样式表不是逻辑的地方。
回答by Peck
Changing your css file to a scss file would allow you to do the trick. An example in Angular would be to use an ngClass and your scss would look like:
将您的 css 文件更改为 scss 文件将使您能够做到这一点。Angular 中的一个示例是使用 ngClass，您的 scss 将如下所示：
.sidebar {
height: 100%;
width: 60px;
&.is-open {
width: 150px
}
}
