CSS：JS你别动，我要全自动😛！

哇偶web
1,065 阅读3分钟

今给主题：要教那网页颜色随按钮点击变换，犹如戏台上的变脸把戏。倒计时五声刚落，寻常匠人多半这般盘算：

  • 1、摆弄些select/switch/radio，列作排兵布阵的DOM模样；
  • 2、挥毫泼墨写就各色样式的CSS样式；
  • 3、少不得请那JavaScript作法，将点击的动静化作样式的更迭；

这三板斧舞将起来，任你是React这般西洋剑法，还是Vue那路北派拳脚，总逃不过与JS勾连的宿命。

可今日偏要立个规矩——不许JS插手半分！诸君当如何破局？

—且看那CSS门中秘技：:has()伪类！—

一、何以CSS当先？

诸君且慢，容在下多嘴问一句：为何实现交互效果，总教CSS打头阵，不教JS包揽全场？

黄金法则：在实现视觉和交互效果时，优先考虑纯 CSS 方案，仅在以下情况使用 JS：

  1. CSS 无法实现需求
  2. 需要复杂的状态管理
  3. 涉及数据处理或业务逻辑

核心维度对比

维度CSS 优势场景JavaScript 优势场景
渲染性能✅ GPU 加速动画、浏览器原生优化❌ 频繁 DOM 操作易导致重排/重绘
资源占用✅ 样式计算由浏览器 C++ 层处理❌ 解析执行消耗 CPU 资源
开发效率✅ 简单动画/布局快速实现✅ 复杂动态逻辑更灵活
维护成本✅ 样式集中管理，结构清晰❌ 样式逻辑分散，耦合度高
浏览器兼容性❌ 新特性需处理兼容问题✅ 可通过 Polyfill 降级

现代CSS的功能越来越强大，比如CSS变量、伪类选择器等，很多以前需要JavaScript实现的效果现在可以用纯CSS完成。

二、初识 :has()

世人大抵是爱追新的。譬如这CSS的:has()伪类，虽出世未久，却已引得众人称奇。

何为:has()伪类？

譬如族中要选个掌事的，须得看其门下有无成器的子弟。那:has()便是这般规矩——它逡巡于DOM树间，见着某元素门下若有一个儿孙合了规矩（即参数中的选择器），便给这元素披上绛红袍子（应用样式）。纵有十个八个不肖子孙（选择器列表中容错），只要有一个合了法度，便算过了关。

诸君且看这无JS的戏法如何开演，开题为例：

1、摆弄些select，列作排兵布阵的DOM模样；

<body class="main">
  <select class="theme">
    <option value="light">Light</option>
    <option value="dark">Dark</option>
  </select>
</body>

2、使用:has()伪类写就各色样式的CSS样式

.main {
    &:has(.theme option[value="dark"]:checked) {
      background: black;
    }

    &:has(.theme option[value="light"]:checked) {
      background: white;
    }
}

何等利落！ theme-change.gif

更有甚者，将:has()与 CSS变量 熔于一炉，炼出改天换地的神通。且在下拆解这移形换影大法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>test</title>
</head>
<style>
  .main {
    &:has(.theme option[value="dark"]:checked) {
      background: black;
      --color-text: white;
    }

    &:has(.theme option[value="light"]:checked) {
      background: white;
      --color-text: black;
    }
  }
  .content {
    color: var(--color-text);
  }
</style>

<body class="main">
  <select class="theme">
    <option value="light">Light</option>
    <option value="dark">Dark</option>
  </select>
  <div class="content">哈哈哈哈哈哈</div>
</body>
</html>

这哪里是样式表？分明是牵一发而动全身的机括。往日需十数行脚本的勾当，如今三两句便成。然则前端诸生莫要欢喜太早——这等技法虽妙，却如走钢丝，须得浏览器新近版本方能承托。旧时IE之流，怕是要作壁上观了。 image.png

呜呼！技术革新之势，如大江东去。:has()之流，看似雕虫小技，实开样式逻辑之新章。然诸君当记：利器虽好，终须用得其所。若为炫技而滥用，便如给乞儿披锦袍，徒增笑耳。

avatar
文章
阅读
粉丝