怎么在html中加判断,css样式里面如何做判断

CSS3条件判断，听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话，你会发现CSS中的“@media”就是条件判断之一。是的，在CSS3的条件判断规范文档中包含了两个部分。

其一是“@media”规则，主要用来“根据媒体属性区分样式表”；

其二是“@supports”规则，主要用来代替前面常用的Modernizr库，在不支持CSS3的浏览器下实现渐进增强式设计。(相关课程推荐：css视频教程)

要想更好的使用@supports，我们有必要先从其语法开始入手，只有知道了怎么用，我们才能更好的去用。@supports {

/* 特殊样式规则 */

}

@supports中的“条件规则”可以声明一条或者几个由不同的逻辑运算符相结合的声明(比如说，非(not)，或(or)，与(and)等)。而且还可以使用括号来确定其操作的优先级关系。

最简单的条件表达式是一个CSS声明，一个CSS属性名，后面加上一个属性值，属性名与属性值之前用分号隔开，比如：(display:flex)

我们来看一个简单的例子：@supports (display:flex) {

section { display: flex }

}

上面这段代码的意思是：如果浏览器支持“display:flex”属性，那么在“section”元素上就运用“display:flex”样式。

基本属性的检查

正如前面的示例一样，你可以使用CSS的基本属性来进行检查：@supports (display: flex) {

div { display: flex; }

}

这种是@supports最基本的使用规则。

本文来自css答疑栏目，欢迎学习！