结合CSS :has() 和 HTML
内容提要
本文讨论了CSS的:has()伪类与HTML的<select>元素结合使用，以实现灵活的条件样式。通过:has()，可以根据用户选择的<option>动态改变<select>及其父元素的样式，无需JavaScript。这种方法适用于表单验证、样式选择器和星级评分等场景，展示了:has()作为现代条件运算符的强大功能。
延伸解读
从“父选择器”到条件运算符
文章指出，:has() 常被称为“父选择器”，但其能力远不止向上选择父元素。结合 <select> 和 <option> 时，:has() 能根据用户选中的选项，将样式应用到 <select> 本身、其父元素，甚至一直向上到 :root。这种向上传递样式的能力，是传统 :checked 伪类无法做到的，因此文章将其视为一种现代条件运算符，而不仅仅是父选择器。
无需 JavaScript 的表单验证思路
文章展示了一个实用场景：利用 :has() 和 :not() 来验证必填的 <select> 元素。具体做法是，当 required 的 <select> 没有选中任何有效 <option> 时，通过 :not(:has(:checked)) 应用样式。这样无需 JavaScript 就能在视觉上提示用户未完成选择，为表单验证提供了一种纯 CSS 的补充手段。
作用域控制与多 select 场景
当页面存在多个 <select> 元素时，直接使用 :has() 可能会误选其他下拉菜单。文章建议为每个 <select> 添加类名，并在 :has() 选择器中引用该类，从而将样式作用域限制在特定组件内。例如在主题选择器示例中，通过类名区分不同用途的 <select>，避免样式冲突，确保条件样式只影响目标元素。
适用场景与注意事项
文章列举了 :has() 与 <select> 结合的几种用途：表单验证、样式选择器、主题切换和星级评分。这些场景的共同点是依赖用户选择来动态改变样式。需要注意的是，文章强调 :has() 相对较新，且示例中通过类名和选择器范围来控制影响，实际使用时需考虑浏览器兼容性，并避免因选择器过于宽泛而影响页面其他部分。
Q&A
CSS的:has()伪类有什么主要功能？
CSS的:has()伪类可以根据用户选择的<option>动态改变<select>及其父元素的样式。
如何使用:has()实现表单验证？
可以使用:has()来验证必填的<select>元素，确保用户选择有效的<option>，例如应用样式如果元素:not(:has(:checked))。
:has()与其他伪类结合使用有什么优势？
:has()可以与其他伪类结合使用，增强条件样式的能力，例如与:not()结合使用，可以实现更复杂的样式选择。
使用:has()可以实现哪些样式效果？
使用:has()可以实现根据选中的<option>改变<select>的背景色、字体颜色等样式效果。
在什么场景下使用:has()是最有效的？
使用:has()最有效的场景包括表单验证、样式选择器和星级评分等需要动态样式的情况。
如何在页面上应用:has()来改变整体样式？
可以通过:root:has(select [value='foo']:checked)来设置整个页面的样式，基于选中的<option>。
