CSS选择器

如果我想选择包含 a.active 的 li 该怎么实现呢？ 目前我们学到的CSS好像是没有办法的，不过今天要将的一个CSS伪类 :has() 就有这个功能，虽然还处于草案阶段，但是还是可以提前了解一下。

li:has(> a.active){
    color:red;
}

除了表示包含，:has 还可以表示兄弟跟随关系
div:has(+ p){
    color:red;
}

表示选择 <div> 标签，前提是这个div标签必须是被一个<p>紧跟着的。此外还可以与:not 一起使用
article:not(:has(a)){
    color:red;
}

其实我们前面讲过的 :focus-within 也是一个通过子元素选择父元素的伪类，只不过条件只能是子元素是否获取焦点， 而 :has 则更灵活和强大。
form:has(:focus){
    background-color:black;
}

兄弟选择器

<p class="print_pdf"></p><span>打印</span>
/* CSS相邻兄弟选择器，控制打印span标签样式 */
p.print_pdf + span { position:relative;top:-4px;}

:focus 选择器用于选取获得焦点的元素。

input:focus{ 
background-color:yellow;
}

CSS选择器适用于具有两个类的元素

链接两个类选择器（之间没有空格）：

.foo.bar {
    /* Styles for element(s) with foo AND bar classes */
}