霍者博客

CSS4激动人心的新特性及浏览器支持度

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

1.否定伪类:not

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

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

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

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

2.匹配任何伪类:matches

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

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

带有只要元素带<p>带有.alert、.error和.warn中任何一个类名,文本颜色都将会是red。

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

3.关系伪类:has

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

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

在下面这个示例中,使用:has和:not结合在一起,选择不包含段落<p>的<li>元素:

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

4.表单限制伪类 :required:optional

匹配表单项中必选项与可选项。

input:required { color:#f30; }

5.可读可写伪类 :read-write、:read-only

大部分元素都是可读不可写的,所以都是 :read-only;像 text input 这些值可以改变的,和 HTML5 中设置了 contenteditable 的元素其本身是可改变的,这些被认为是具有写属性的,所以是 :read-write

:read-write { font-family: Georgia; }

6. :any-link

目前,我们可以使用:link和:visited表明链接的访问状态。这个更进一步,它会检查href的是否在用户的浏览历史中存在,以确定是否一个给定的链接是否已被访问。

:link, :visited {
color: blue;
}

CSS4 ,可以直接这样应用,上述代码等价于:

:any-link {
color: blue;
}

7.:scoped

CSS4选择器,CSS被赋予一个全局范围。换句话说,如果你添加下面的CSS:

div {
color: #444;
}

所有的div将应用的 color:#444 的样式规则(这里假设没有被复写的情况下)。css4选择器 允许将样式和风格限定于一个元素标签内:

<section>
<h2>This is outside the scope.</h2>
<aside>
<style scoped>
h2 {
font-size: 2rem;
}
</style>
<h2>This is within the scope</h2>
</aside>
</section>

在这个例子中,我们已将应用范围到限定在aside元素中。在这种标记风格将只适用于父元素下的子元素。

8.CSS网格布局

网格布局为我们创建了类似于表格布局的结构,然而,我们可以使用CSS而非HTML中所描述的选择器来创建布局,通过媒体查询来重定义布局以适应不同的上下文内容。这样我们就可以正确区分视觉和源码的元素顺序。作为一个设计师,你可以自由地改变页面元素的位置来适应不同断点下的布局,而不必为你响应式设计去调整结构。与HTML中基于表格的布局不同,网格布局允许你堆叠元素。因此,在需要的情况下,一个元素可以重叠另一元素。

剧透点到为止,CSS4更多新特性请等待官方发布新版本。

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/653.html,标题:CSS4激动人心的新特性及浏览器支持度

【我来说两句】
分享到:

相关文章:


CSS font-weight 属性  (2017-1-25 6:8:17)

只使用CSS如何禁止选中文字,而不是JS  (2016-12-26 7:11:36)

如何设置CSS里元素垂直居中效果  (2016-12-20 6:14:14)

CSS实现多行文本溢出显示省略号  (2016-12-12 5:0:22)

CSS样式表知识点回顾  (2016-4-24 8:7:20)

CSS​样式文件命名规范  (2016-4-21 9:49:45)

word-wrap&word-break的区别  (2016-4-18 11:0:26)

CSS盒子浮动 float  (2016-4-17 10:9:14)

CSS空间定位z-index空间定位  (2016-4-17 8:20:0)

CSS文字样式  (2016-4-17 8:0:48)


评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。