持续创造，加快生长！这是我参与「日新方案 10 月更文挑战」的第21天，点击检查活动详情

前语

随着前端的不断发展，更多新的 CSS 特点不断加入提案，本文罗列 7 个不常用但很有用且你见过也或许没见过的 CSS 特点，带咱们领会 CSS 之美。

1. position: sticky

不知道咱们平常业务开发中有没有碰到像上图相同的吸顶的需求：标题在翻滚的时分，会一直贴着最顶上。

这种场景实际上许多：比方表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。假如让咱们自己动手做的话，是不是会用 js 结合 css 来完成呢？以前确实是这样的，直到后来 position 特点新增了一个特点值 sticky ，前端程序员才迎来了小春天。

// css 部分
.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 部分
<div class="container">
  <div class="header">Header</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

就这么简略？对，就这么简略，可是小伙伴们运用的时分要注意兼容性。

2. :empty 选择器

平常开发的时分数据都是经过请求接口获取的，也会存在接口没有数据的情况。这个时分正常的做法是给用户一个提示，让用户知道当时不是出 bug 了，而是确实没有数据。

一般的做法是咱们人为的判断当时数据返回列表的长度是否为 0，假如为 0 则显示一个 “暂无数据” 给用户，反之则躲藏该提示。写过 Vue 的小伙伴是不是常常这么做：

<div>
    <template v-if="datas.length">
        <div v-for="data in datas"></div>
    </template>
    <template v-else>
        <div>暂无数据</div>
    </template>
</div>

可是有了 :empty 这个选择器后，你大能够把这个活交给 CSS 来干。

.container {
    height: 400px;
    width: 600px;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container:empty::after {
    content: "暂无数据";
}

经过 :empty 选中内容为空的容器，然后经过伪元素为空容器添加提示。是不是便利许多呢？

3. gap

小伙伴们日常开发中，都有用过 padding 和 margin 吧，margin 一般用做边距，让两个元素离隔一点间隔，可是对于一些场景下，咱们很难经过计算得到一个除的尽的值，比方 100px 我要让 3 个元素等分，且每个元素离隔 10px，这就很尴尬了。

没关系！咱们能够用 gap 特点，gap 特点它适用于 Grid 布局、Flex 布局以及多列布局，并不一定只是 Grid 布局中能够运用。

比方咱们要让每个元素之间离隔 20px， 那么运用 gap 咱们能够这样：

display: flex | grid；
gap: 20px;

是不是很简略呢？

4. background-clip: text

这个特点或许小伙伴们用的不多，有什么用呢？简略来说就是能够做一个带布景的文字作用：

图 1 + 图 2 = 图 3。是不是很冷艳呢？咱们平常 background-clip 是不是都用来做一些裁切作用？in知道它还有个特点值是 text 吗？background-clip: text 用来做带布景的文字作用，信任咱们平常阅读一些网站的时分都会看到类似的完成，实际上经过 CSS 咱们也能做到这种作用，可不要傻傻的以为都是用制图工具做的。

5. user-select

许多人不知道这个特点是什么意思。咱们看看下图：

网页和 APP 有个不同点是，网页上的字是能够经过光标选中的，而 APP 的不行。

有的小伙伴或许会疑问：那我网页上也用不着这个特点啊？

非也非也，咱们知道现在许多新的技能产生，能够在 APP 上嵌套 webview 或者是网页，比方 Electron 做的 桌面端使用 ，咱们没见过哪个桌面端使用是能够光标选中的吧？

而 user-select 特点能够 禁用光标选中 ，让网页看着和移动端相同。

6. :invalid 伪类

:invalid表示任意内容未经过验证的 input或其他form 元素。什么意思呢？举个例子。

这是一个表单。

<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 当值有用时，元素颜色为绿色，无效时为红色。

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;
}

有了 :invalid 特点后，咱们就能够不必 JS 也能完成校验提示的作用了。

7. :focus-within 伪类

:focus-within表示一个元素取得焦点，或该元素的子孙元素取得焦点，就会匹配上。啥意思呢？

话不多说，先看图：

// CSS
form {
    border: 1px solid;
    width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
form:focus-within {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
    background-color: beige;
}
// HTML
<form>
  <input type="text" id="ipt" placeholder="请输入..." />
</form>

能够根据子元素的状态来改变父元素的样式，便利的很。也能玩出不少把戏来。

有的小伙伴看完后或许会想：嗷，也没啥的啊，这有啥把戏？

给咱们推荐一篇文章，看完就懂了：

纯css完成：仿账户暗码登录时，小熊猫捂眼动作切换的小彩蛋 – ()

8. mix-blend-mode:difference

mix-blend-mode:difference 特点描述了元素的内容应该与元素的直系父元素的内容和元素的布景如何混合。其中，difference 表示差值。

假如给你这张图，你会怎么去绘制？是不是很费事。

可是假如用 mix-blend-mode:difference 这个特点，就能够很简单的完成。

.mode {
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode:difference;
}
  .dark {
    position: relative;
    left: 6px;
    height: 24px;
    width: 24px;
    background-color: grey;
    border-radius: 50%;
}
.light {
    mix-blend-mode:difference;
    position: relative;
    left: -6px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 4px solid grey;
}

关于 mix-blend-mode:difference 的更多用法，我推荐咱们一篇文章：

谈谈一些风趣的 CSS 题目（十七）– 不可思议的颜色混合模式 mix-blend-mode – ()

结束语

本文就到此结束了，期望咱们共同努力，提前拿下 CSS 。

假如文中有不对的当地，或是咱们有不同的见地，欢迎指出 。

假如咱们觉得所有收成，欢迎一键三连。