CSS子元素选择父元素的示例分析-创新互联

这篇“CSS子元素选择父元素的示例分析”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“CSS子元素选择父元素的示例分析”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？

    

        1
    
    

        2
    

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

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

除了表示包含，:has 还可以表示兄弟跟随关系

div:has(+ p){
    color:red;
}

表示选择

article:not(:has(a)){
    color:red;
}

article:has(:not(a)){
    color:red;
}

form:focus-within{
    background-color:black;
}

form:has(:focus){
    background-color:black;
}