css选择器:精准定位紧邻标签的标签
本文探讨CSS选择器中如何精准选中特定兄弟元素,特别是紧跟在标签后的标签。 假设HTML结构如下:
我们需要一个CSS选择器仅选中第二个标签。 简单的兄弟选择器无法满足“紧邻”这一条件。
立即学习“前端免费学习笔记(深入)”;
理想的选择器是p:has(+ ul)。 :has() 选择器检查元素是否包含满足特定选择器的子元素或兄弟元素;+ 符号表示紧邻的下一个兄弟元素。 因此,p:has(+ ul) 精确匹配目标标签。
然而,p:has(+ ul) 属于较新的CSS规范,浏览器支持度可能有限。 作为替代方案,您可以考虑使用JavaScript库(例如jQuery)来实现相同的效果。 jQuery 提供了对 :has() 选择器的良好支持。











