随着前端的不断发展，更多新的 CSS 属性不断加入提案，本文列举 5 个不常用但很有用且你见过也可能没见过的 CSS 属性，带大家领略 CSS 之美。
一、position: sticky
不知道大家平时业务开发中有没有碰到这样的需求：标题在滚动的时候，会一直贴着最顶上。这种场景实际上很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。如果让大家自己动手做的话，是不是会用 js 结合 css 来实现呢？以前确实是这样的，直到后来 position 属性新增了一个属性值 sticky ，前端程序员才迎来了小春天。
css 部分：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.container { background-color: oldlace; height: 200px; width: 140px; overflow: auto; } .container div { height: 20px; background-color: aqua; border: 1px solid; } .container .header { position: sticky; top: 0; background-color: rgb(187, 153, 153); } |
html 部分：
|
1 2 3 4 5 6 |
<div class="container"> <div class="header">Header</div> <div>1</div> <div>2</div> <div>3</div> </div> |
就这么简单？对，就这么简单，但是使用的时候要注意兼容性。
二、:empty 选择器
平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出 bug 了，而是确实没有数据。一般的做法是我们人为的判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。写过 Vue 的小伙伴是不是经常这么做：
|
1 2 3 4 5 6 7 8 |
<div> <template v-if="datas.length"> <div v-for="data in datas"></div> </template> <template v-else> <div>暂无数据</div> </template> </div> |
但是有了 :empty 这个选择器后，你大可以把这个活交给 CSS 来干:
|
1 2 3 4 5 6 7 8 9 10 11 |
.container { height: 400px; width: 600px; background-color: antiquewhite; display: flex; justify-content: center; align-items: center; } .container:empty::after { content: "暂无数据"; } |
通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。是不是非常方便？
三、gap
小伙伴们日常开发中，都有用过 padding 和 margin 吧，margin 一般用做边距，让两个元素隔开一点距离，但是对于一些场景下，我们很难通过计算得到一个除的尽的值，比如 100px 我要让 3 个元素等分，且每个元素隔开 10px，这就很尴尬了。
没关系！我们可以用 gap 属性，gap 属性它适用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中可以使用。
比如我们要让每个元素之间隔开 20px， 那么使用 gap 我们可以这样：
|
1 2 |
display: flex | grid； gap: 20px; |
四、background-clip: text
这个属性可能用的不多，有什么用呢？简单来说就是可以做一个带背景的文字效果：
大家平时 background-clip 是不是都用来做一些裁切效果？你知道它还有个属性值是 text 吗？background-clip: text 用来做带背景的文字效果，相信大家平时浏览一些网站的时候都会看到类似的实现，实际上通过 CSS我们也能做到这种效果。
五、:invalid 伪类
:invalid 表示任意内容未通过验证的 input 或其他 form 元素。什么意思呢？举个例子。
|
1 2 3 4 5 6 7 8 |
<form> <label for="url_input">Enter a URL:</label> <input type="url" id="url_input" /> <br /> <br /> <label for="email_input">Enter an email address:</label> <input type="email" id="email_input" required/> </form> |
我们的需求是让 input 当值有效时，元素颜色为绿色，无效时为红色。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
input:invalid { background-color: #ffdddd; }
form:invalid { border: 5px solid #ffdddd; }
input:valid { background-color: #ddffdd; }
form:valid { border: 5px solid #ddffdd; }
input:required { border-color: #800000; border-width: 3px; }
input:required:invalid { border-color: #C00000; } |
