栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

您可以在CSS中使用if / else条件吗?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

您可以在CSS中使用if / else条件吗?

不是传统意义上的,但如果可以访问HTML,则可以为此使用类。考虑一下:

<p >Text</p><p >Text</p>

并在您的CSS文件中:

p.normal {  background-position : 150px 8px;}p.active {  background-position : 4px 8px;}

这就是 CSS的 方法。


然后是CSS预处理程序,如Sass。您可以在此处使用条件语句,如下所示:

$type: monster;p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}

缺点是,您必须预处理样式表,并且条件是在编译时而不是运行时评估的。


自定义属性
(又称CSS变量)是CSS固有的更新功能。在运行时对它们进行评估(在支持它们的浏览器中)。

有了他们,您可以做一些事情:

:root {  --main-bg-color: brown;}.one {  background-color: var(--main-bg-color);}.two {  background-color: black;}

最后,您可以使用自己喜欢的服务器端语言对样式表进行预处理。如果您使用的是PHP,请提供一个

style.css.php
文件,如下所示:

p {  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;}

但是,在这种情况下,由于缓存这样的样式表将很困难,因此会对性能产生影响。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575601.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号