在前端开发中，我们常需要根据用户行为动态改变页面样式。其中，CSS 伪类和伪元素是最常用的选择器之一。它们可以让我们根据元素的状态或位置来精确地选中特定的元素，并对其应用样式。但如果我们想要更加灵活地控制样式，或者实现一些自定义交互效果，就需要了解一些额外的技巧。
CSS 变量
CSS 变量是 CSS3 中引入的一项新特性，可以让我们定义并重用变量，从而简化代码和提高可维护性。通过 var() 函数，我们可以在任何能使用 CSS 值的地方引用这些变量。例如：
:root {
--main-color: #007bff;
}
a {
color: var(--main-color);
}上面的代码中，我们定义了一个名为 --main-color 的变量，并将其赋值为蓝色。在 a 元素的样式规则中，我们使用 var() 函数引用了该变量，以指定链接文字的颜色。
CSS 变量不仅可以让我们方便地定义和修改样式，还可以与 JavaScript 结合使用，从而实现更加复杂的动态效果。例如，以下代码演示了如何通过 JavaScript 动态改变 CSS 变量的值：
-- -------------------- ---- -------
---- ---------------
------- ------------------------------ --------------
-------
----- -
------------- --------
-
---- -
------ ------
------- ------
----------------- ------------------
-
--------
--------
-------- ------------- -
----- --- - -------------------------------
----- -------- - --- - ------------------------ - -----------------------
------------------------------------- ----------
-
---------注意，由于 CSS 变量只能在声明它们的规则块内或其后代元素中引用，因此我们需要将 :root 选择器用于所有要使用该变量的元素。
:focus-within 伪类
:focus-within 是一个比较新的 CSS 伪类，可以选中拥有焦点或包含拥有焦点元素的父元素。例如：
.form-group:focus-within label {
color: #007bff;
}上面的代码中，当 .form-group 元素或其任何后代元素获得焦点时，它的子元素 label 将会改变颜色。
:focus-within 的应用场景非常广泛，可以用于实现自定义表单样式、响应式菜单、模态框等交互效果。
利用 JavaScript 操作样式
JavaScript 可以非常方便地操作元素的样式，从而实现更加复杂的交互效果。例如，以下代码演示了如何通过 JavaScript 实现滑块式复选框的效果：
-- -------------------- ---- -------
-------
------ --------------- ------------------------- --
----- -------------------
------ --
--------
-------
----- -
--------- ---------
-------- -------------
---------- -----
------------ ----
------------- -----
------- --------
-
---------------------- -
--------- ---------
-------- --
------- --------
-
------- -
--------- ---------
---- ----
----- --
------ -----
------- -----
----------------- -----
-------------- ----
----------- --- -----
-
------------- - ------- -
----------------- --------
-
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------