CSS @supports标记在CSS代码⾥跟@media查询语句的语法相似：
代码如下复制代码
@supports(prop:value) {
/* 各种样式 */
}
用来探测当前浏览器是否⽀持某项CSS样式特征。
请问css的条件判断语句怎么写
1、常见用法
语法：
@supports (property: value){
element {
property: value
}
}
“@supports”中的“条件规则”可以声明一条或者几个由不同的逻辑运算符相结合的声明(比如说，非(not)，或(or)，与(and)等)，而且还可以使用括号来确定其操作的优先级关系。
比如：Flex布局
flex {
float: left
}
@supports (display: flex){
flex {
display: flex
float: none
}
}
上面的代码可以用来应对那些不支持Flex布局的浏览器。
2、非(not)逻辑声明
@supports not (property: value){
element {
property: value
}
}
当使用not时，表示浏览器不支持某些属性时，对应的样式将会渲染。
3、与(and)逻辑声明
@supports (property: value) and (property: value) {
element {
property: value
}
}
当使用and时，只有and两端条件同时成立，也就是同时返回true时，对应的样式才会渲染。
请问css的条件判断语句怎么写
CSS 没有条件判断语句的概念。但是，可以使用媒体查询来实现类似的功能。
媒体查询允许在特定的条件下应用 CSS 规则。例如，可以使用媒体查询来设置当屏幕宽度小于某个值时应用的样式。
下面是一个示例，在屏幕宽度小于 800 像素时将 body 的背景色设置为红色：
@media screen and (max-width: 800px) { body { background-color: red } }
也可以使用 @supports 语句来测试浏览器是否支持某个 CSS 特性。例如，下面的代码会在浏览器支持 grid 布局时将 body 背景色设置为红色：
@supports (display: grid) { body { background-color: red } }
还可以使用伪类来控制样式的应用。例如，可以使用 :hover 伪类来设置当鼠标悬停在元素上时应用的样式。
