有没有办法在 CSS 中使用条件语句？
【问题讨论】：
标签： css
我想说，最接近 CSS 中“IF”的是媒体查询，例如可用于响应式设计的媒体查询。对于媒体查询，您会说“如果屏幕宽度在 440 像素到 660 像素之间，请执行此操作”。在此处阅读有关媒体查询的更多信息：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;
}
【讨论】：
【讨论】：
if、else、while、for 等条件语句。
CSS 本身没有条件语句，但这里是 a hack involving custom properties（又名“css 变量”）。
在这个简单的示例中，您希望根据特定条件应用填充，例如“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;
}
但我将把它的应用留给你想象。
【讨论】：
@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 }
}
【讨论】：
CSS 中唯一可用的条件是 selectors 和 @media。一些浏览器支持CSS 3 selectors 和media queries 中的一些。
您可以使用 JavaScript 修改元素以更改它是否匹配选择器（例如，通过添加新类）。
【讨论】：
我认为您可以在 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;
}
【讨论】：
这些年来，CSS 已经成为一个非常强大的工具，并且它对 javaScript 可以做的很多事情都有 hack
在 CSS 中有一个使用条件语句/逻辑的 hack。
这涉及到使用符号'~'
让我用一个例子来进一步说明。
假设您希望在单击按钮时将背景滑入页面。您需要做的就是使用单选复选框。 设置按钮下方单选框的标签样式，以便在按下按钮时复选框也会被按下。
那你就用下面的代码
.checkbox:checked ~ .background{
opacity:1
width: 100%
}
此代码仅说明如果复选框已选中，则打开后台，否则保持原样。
【讨论】：
css 文件不支持条件语句。
如果您希望某些东西看起来是两种方式中的一种，取决于某些条件，请使用您的服务器端脚本语言或 javascript 给它一个合适的类。例如
<div class="oh-yes"></div>
<div class="hell-no"></div>
【讨论】：
没有适用于 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 */
}
请记住，您应该始终逐步增强，因此，您应该编写类似这样的内容，而不是上面的示例（它更好地说明了这一点）：
#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 的渐进增强方法首先作为无 js 基础。
【讨论】：
将您的 css 文件更改为 scss 文件可以让您做到这一点。 Angular 中的一个例子是使用 ngClass，你的 scss 看起来像：
.sidebar {
height: 100%;
width: 60px;
&.is-open {
width: 150px
}
}
【讨论】：
虽然这感觉有点像 hack，并且可能无法在所有浏览器中完美运行，但我最近使用的一种方法结合了这样一个事实，即 CSS（至少在 Chrome 中）似乎忽略了属性上设置的无效值，并且我们可以设置自定义属性在无效时回退到默认值。
（注意：我尚未对此进行深入测试，因此将其视为概念/可能想法的 hacky 证明）
以下内容是用 SCSS 编写的，但在标准 CSS 中应该也能正常工作：
.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);
}
我正在通过 JavaScript / React 设置自定义属性，但无论您如何设置它都可能会起作用：
// '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})`
);
当chosenLoaderUrl 设置为我的网址时，该网址是display 属性的无效值，因此它似乎被忽略了。
当chosenLoaderUrl 设置为空值时，它会回退到我的var() 语句中的默认值，因此将display 设置为none
我不确定这个概念有多“通用”，但我想我会把它添加到这里的其他建议中，以防它对任何人有用。
【讨论】：
您的样式表应该被视为一个可用变量的静态表，您的 html 文档可以根据您需要显示的内容调用这些变量。逻辑应该在您的 javascript 和 html 中，如果您确实需要，请使用 javascript 根据条件动态应用属性。样式表不是逻辑的地方。
【讨论】：
不，如果在 CSS 中，你不能这样做，但你可以选择你将使用的样式表
这是一个例子：
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
将仅用于 IE 6 这里是来自 http://www.quirksmode.org/css/condcom.html 的网站，只有 IE 有条件 cmets。其他浏览器没有，尽管您可以将一些属性用于以 -moz 开头的 Firefox 或以 -webkit 开头的 safari。您可以使用 javascript 来检测您正在使用的浏览器，并使用 javascript 来执行您想要执行的任何操作，但这是一个坏主意，因为它可以被禁用。
【讨论】：