面试题：CSS选择器高级难度面试题

Question

假设HTML结构如下：<div class='parent'><div class='child1'><p class='text'>文本1</p></div><div class='child2'><p class='text'>文本2</p></div></div>。使用CSS选择器，如何只选中class为'child2'的div中的'p'元素且其class为'text'，同时要求使用属性选择器和伪类选择器的组合（不能使用后代选择器简单实现），阐述思路并写出代码。

Answer 1

思路

1. 首先，通过属性选择器 [class="child2"] 精准定位到 class 为 child2 的 div 元素。
2. 然后，利用伪类选择器 :has() 来筛选出包含特定 p 元素（class 为 text）的 div 元素。:has() 伪类选择器表示选择包含符合指定选择器的后代元素的元素。
3. 最后，通过再次使用属性选择器 p[class="text"] 选中该 div 中的 p 元素。

代码

div[class="child2"]:has(p[class="text"]) p[class="text"] {
    /* 这里可以添加样式 */
}