是一门不断在发展的“语言”。在这篇文章中,我们一起来看看我们可以先玩起来的一些新特性。文中提到的一些新特性,在个别浏览器中已得到支持。但这些功能并不一定可以立即用于生产,甚至有些还是在实验阶段。下面学步园小编来讲解下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技术的优质平台!