你使用过:placeholder-shown和:focus-within伪类吗？

placeholder-shown

当input或者textarea元素拥有placeholder属性的时候可使用该伪类，选择所有显示占位符(placeholder)的元素。当placeholder的内容显示的时候拥有该伪类。比较直观的感受就是当用户框输入内容时该伪类不在生效。
MDN:传送门

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

以下简单的演示placeholder-shown这个伪类的使用：

<!-- DOM 结构 -->
<div>
  <input type="text" placeholder="default content in text input">
</div>
<div>
  <textarea placeholder="default content in textarea"></textarea>
</div>

// scss 样式
// 选择所有显示占位符(placeholder)的元素
textarea,
input[type="text"] {
  width: 100%;
  max-width: 220px;
  padding: 8px 12px;
  outline: none;
  border-radius: 6px;
  border: 2px solid seagreen;
  transition: all .4s ease;
  &:placeholder-shown { // 当placeholder的值显示的伪类
    border-color: slateblue;
    border-radius: 50px;
  }
}
textarea {
  width: 100%;
  max-width: 100%;
  min-height: 150px;
  margin-top: 25px;
  border-radius: 3px;
  &:placeholder-shown {
    border-radius: 3px;
  }
}

focus-within

这个伪类是当后代元素获取焦点时生效，任何一个后代元素获取焦点都会让该伪类生效。
MDN:传送门

:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树中的后代也包括在内）

以下简单的演示focus-within这个伪类的使用：

<!-- DOM 结构 -->
<div class="focus-box">
  <div>
    <input type="text" placeholder="default content">
  </div>
  <div>
    <button class="button--green">Click Me</button>
    <span>
    当子元素获取焦点时，父元素的focus-within伪类生效</span>
  </div>
</div>

// scss 样式
// 当 <div> 的某个后代获得焦点时，匹配 <div> 
.focus-box {
  padding: 50px;
  border: 5px dotted slateblue;
  transition: all .4s ease;
  &:focus-within {
    border-color: seagreen;
    border-radius: 100px;
  }
}

可以使用这两个伪类实现很多效果，诸如折叠导航，二级导航等。等待小伙伴自己去开发吧，不使用JavaScript就可以实现很多效果，大大提高了页面的渲染效率，降低了浏览器的性能消耗。