CSS 选择器与伪类有哪些冷门技巧?你真的全部掌握了吗?
当你在网页上看到按钮点击时的波纹效果,或是输入框获得焦点时的动态边框,这些精妙的交互背后都藏着CSS选择器与伪类的魔法。大多数开发者熟练使用:hover、:active等基础伪类,却不知道:focus-visible能让键盘导航更专业,:has()可以实现组件级响应式,:empty能智能处理空数据状态。本文将揭晓这些鲜为人知的CSS黑科技,让你的样式表拥有外科手术般的精准控制力。 一、结构选择器的进阶玩法 1. :empty 伪类的场景化应用 这个选择器不仅能隐藏空元素,配合动画可以实现数据加载时的骨架屏效果: ```css .message:empty { background: linear-gradient(90deg,eee 25%,ddd 50%,eee 75%); animation: loading 1.5s infinite; } ``` 2. :target 的交互新思路 传统锚点定位的进阶玩法,实现无JS的标签页切换: ```css .tab-content:not(:target) { display: none; } tab1:target ~ .default-content { display: block; } ``` 二、表单增强型伪类秘籍 1. :read-only 与 :read-write 的双生组合 智能区分可编辑区域: ```css input:read-only { background: f5f5f5; cursor: not-allowed; } div:read-write { border: 2px dashed 4CAF50; } ``` 2. :valid/:invalid 的实时验证艺术 在用户输入时就提供视觉反馈: ```css input:invalid { border-color: ff4757; animation: shake 0.5s; } input:valid + .checkmark { display: inline-block; } ``` 三、现代浏览器的新锐选择器 1. :focus-visible 的智能聚焦 区分鼠标点击和键盘操作,提升可访问性: ```css button:focus:not(:focus-visible) { outline: none; } button:focus-visible { box-shadow: 0 0 0 3px 4e9eff; } ``` 2. :is() 与 :where() 的降维打击 简化复杂嵌套的终极方案: ```css / 传统写法 / .header nav ul li a, .footer nav ul li a, .sidebar nav ul li a {} / 现代写法 / :is(.header, .footer, .sidebar) nav ul li a {} ``` 3. :has() 选择器的革命性突破(实验性) 实现父元素反向选择: ```css / 当列表包含被勾选的项时改变样式 / ul:has(li input:checked) { border-color: 00b894; } ``` 四、实战案例:导航栏的六重变身术 ```css / 当前激活项 / .nav-item:has(a.active)::after { transform: scaleX(1); } / 二级菜单悬浮逻辑 / .menu-group:hover > .submenu, .menu-group:focus-within > .submenu { opacity: 1; pointer-events: all; } / 移动端适配 / @media (hover: none) { .menu-group:active > .submenu { opacity: 1; } } ``` 五、浏览器兼容性生存指南 渐进增强策略: 使用特性检测工具检测CSS.supports()