现在的位置: 首页 > 移动开发 > 正文

CSS3有哪些亮点

2020年06月10日 移动开发 ⁄ 共 938字 ⁄ 字号 评论关闭

  是一门不断在发展的“语言”。在这篇文章中,我们一起来看看我们可以先玩起来的一些新特性。文中提到的一些新特性,在个别浏览器中已得到支持。但这些功能并不一定可以立即用于生产,甚至有些还是在实验阶段。下面学步园小编来讲解下CSS3有哪些亮点?

  CSS3有哪些亮点

  第四代CSS选择器

  CSS3的选择器提供了很多像:nth-child这样有用的选择器,并且得到浏览器支持。CSS的第四代选择器(CSS4选择器),经我们带来了更多有用的选择器。

  否定伪类:not

  否定伪类选择器其实在CSS3选择器中就出现了,只不过CSS4选择器对否定伪类选择器升级了。在CSS3中,你可以通过否定伪类选择器不去选中你不需要用到的CSS样式的元素。比如说,你想除了.intro的段落之外文本都不加粗,你就可以这样使用伪类选择器。

  p:not(.intro){font-weight:normal;}

  在CSS4选择器中,可以传入一个逗号(,)分隔的列表选择器:

  p:not(.intro,blockquote){font-weight:normal;}

  关系伪类:has

  这个选择器通过一个参数从一个列表选择器中匹配到相对应的元素。有一个最易说明的示例,在这个例子中任何一个包含链接都会加上一个黑色的边框:

  a:has(>img){border:px solid#000;}

  在下面这个示例中,使用:has和:not结合在一起,选择不包含段落

  • 元素:

      li:not(:has(p)){padding-bottom:em;}

      匹配任何伪类:matches

      这个伪类意味着,可以将规则应用到一个组合选择器中,如:

      p:matches(.alert,.error,.warn){color:red;}

      带有只要元素带

    带有.alert、.error和.warn中任何一个类名,文本颜色都将会是red。

      你可以在css4-selectors.com网站上测试你的浏览器是否支持这些CSS4选择器。这也是一个资源网站,你可以在这个站上找到将要添加的选择器。

      以上就是关于“CSS3有哪些亮点”的内容,希望对大家有用。更多资讯请关注学步园。学步园,您学习IT技术的优质平台!

  • 抱歉!评论已关闭.