面试题：CSS中等难度面试题：组合选择器的应用

Question

假设有一个HTML结构，包含多个类名为'item'的div元素，其中部分div内部又有类名为'sub - item'的span元素。请使用CSS组合选择器，仅对包含'sub - item' span元素的'item' div设置背景颜色为淡蓝色（lightblue），并说明使用了哪种组合选择器及其原理。

Answer 1

div.item:has(span.sub-item) {
    background-color: lightblue;
}

使用了:has组合选择器。其原理是:has选择器接受一个选择器作为参数，匹配那些至少包含一个能被其参数选择器选中的后代元素的元素。在这里，div.item:has(span.sub-item)表示选择类名为item的div元素，且这个div元素内部至少有一个类名为sub-item的span元素。