:has() 与关系型选择 | CSS

本章覆盖:`:has()`;根据后代或兄弟状态选择父级 / 前序元素;form group 根据 invalid input 改变样式;card 根据内部内容改变布局的场景;`:has()` 与 JavaScript DOM 查询 / 状态 class 的边界;selector 可读性与复杂度;浏览器兼容性检查;不把复杂业务状态机搬进 CSS selector。

本章知识点

  • :has()
  • 根据后代或兄弟状态选择父级 / 前序元素
  • form group 根据 invalid input 改变样式
  • card 根据内部内容改变布局的场景
  • :has() 与 JavaScript DOM 查询 / 状态 class 的边界
  • selector 可读性与复杂度
  • 浏览器兼容性检查
  • 不把复杂业务状态机搬进 CSS selector