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答疑栏目,欢迎学习!

以上就是css样式里面如何做判断的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏