  桂花飘香的季节， 小明迎来了自己当面试官的第一位面试者小红。初见时的惊鸿一瞥， 小明...。
小明觉得这时候必须展现自己技术的深度，一想头几天刚研究过伪类，可以一试，一想到这，小明得意一笑😊

:default

小明: 伪类 :default 有了解吗, 介绍一下
小红微微一笑: 该伪类只作用在表单元素上，表示处于默认状态下
小明：下拉框 (select) 和多选框 (checkbox) 能有多个默认状态吗
小红：嗯，可以的
小明: 这个伪类有什么实际作用
小红: 我觉得用户在选择一组数据时候，能够知道默认选项是什么, 可以起到一定的引导作用, 增强用户体验。
- 另外如果 option 中没有 selected, checkbox 和 radio 没有 checked, 伪类 :default 是不会匹配的。
- 其次 javascript 的快速修改不会影响伪类 :default
- 感觉在支付的选择方式上可以操作一下，比如在支付包，微信，银行卡中可以默认选择一种具体如下图 👇
小红: 不信吗，那你使劲戳我🐶
小明: 怎么有这么奇怪的要求 👀 。。。

:empty

小明：嗯，伪类 :empty 有接触吗
小红拨弄了下前额的发丝
小明心中一颤
小红: 这个主要匹配空标签元素有几个注意点

** 感谢灬Volcano的指正仅有注释能够匹配附上demo 戳我

1. 元素内有空格换行都不匹配
1. 没有闭合标签的闭合元素也无法匹配:empty伪类
1. ::before, ::after 的内容不影响:empty伪类的匹配
- 献上代码截图 👇

// css
.cs-empty:empty {
  height: 20px;
  background-color: lightblue;
}
h3::after {
  content: 'wo shi h3';
}

<!-- 正常匹配 -->
<div class="cs-empty"></div>

<!-- 有注释不匹配 -->
<div class="cs-empty"><!-- 注释 --></div>

<!-- 有空格不匹配 -->
<div class="cs-empty"> </div>

<!-- 有换行 不匹配 -->
<div class="cs-empty">

</div>

<!-- 没有闭合标签的闭合元素 不匹配 -->
<p class="cs-empty">
<p class="cs-empty">

<!-- ::before, ::after 有内容 正常匹配 -->
<h3 class="cs-empty"></h3>

小明: 有什么具体的实用性吗
小红：当然
- 隐藏空元素，排除空元素带来布局影响的可能性
- 字段缺失的智能提示

// 隐藏空元素
.cs-module:emtpy {
	display: none;
}

.ajax dd {
  margin-top: -1.3em;
}
.ajax dd:empty::after {
  content: '没有搜素结果';
}

// 智能提示
<dl class="ajax">
  <dt>姓名</dt>
  <dd>张三</dd>
  <dt>性别：</dt>
  <dd></dd>
  <dt>手机：</dt>
  <dd></dd>
  <dt>邮箱</dt>
  <dd></dd>
</dl>

具体代码在这里😄

:placeholer-shown

小明心想这妹子可以啊继续道： :placeholder-shown 了解不
小红：小意思啦
- 表示当输入框的 placeholder 内容显示的时候，该伪类匹配
- 具体的使用大概有两点
  - 输入时候的交互
  - 空值判断

// 输入交互的关键代码
.input:placeholder-shown::placeholder {
  color: transparent;
}

.g {
  position: relative;
}

.input-label {
  position: absolute;
  left: 16px;
  top: 14px;
  pointer-events: none;
}
.input {
  line-height: 3.5;
}

.input:not(:placeholder-shown) + .input-label,
.input:focus + .input-label {
  transform: scale(.75) translate(0, -32px);
}

<div class="g">
  <input class="input" placeholder="邮箱" />
  <label for="" class="input-label">邮箱</label>
</div>

具体图片 👇 这也是能够让用户知道当前填写的是什么的一种表现

上面的图片中只有一个小例子有聚焦效果，其他的聚焦效果请使劲戳我👇进行体验

// 空值判断的具体代码
input:placeholder-shown + small::before,
textarea:placeholder-shown + small::before {
  content: "尚未输入内容";
  color: red;
  font-size: 87.5%;
}
// 这里的 placeholder 的空格很关键 自己可以尝试去掉 试一下
<input type="text" placeholder=" " /> <small></small>
<textarea type="text" placeholder=" "></textarea> <small></small>

具体展示如下 👇

实际操作可以戳我👇进行体验

小明心想这妹妹有点东西啊，要不多聊会：你口渴不，来杯小蓝杯？
小红：好的呀！
小明屁颠屁颠去买奶茶🥤了。。。

最后

以上内容借鉴了张鑫旭老师的《css选择器世界》，为了写这几个例子，又阅读了一遍，收获不少。至于小明，当然还是要回来的 😄

学好 css伪类 == 秋天的第一杯奶茶 🥤

:default

:empty

:placeholer-shown

最后