CSS⼦元素选择⽗元素的实现
通常⼀个CSS选择器都是从上往下选择的，通过⽗元素选择⼦元素，那么能不能通过⼦元素选择⽗元素呢？
<ul>
<li>
<a href="#" class="active">1</a>
</li>
<li>
<a href="#">2</a>
</li>
</ul>
如果我想选择包含 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)){
css兄弟选择器
color:red;
}
表⽰不包含 <a> 的 <article>标签。注意这⾥ :not 和 :has 的先后顺序，不同顺序代表不同的意思
article:has(:not(a)){
color:red;
}
表⽰包含⾮ <a> 的 <article>标签
其实我们前⾯讲过的 :focus-within 也是⼀个通过⼦元素选择⽗元素的伪类，只不过条件只能是⼦元素是否获取焦点，⽽ :has 则更灵活和强⼤。
form:focus-within{
background-color:black;
}
如果通过 :has 实现的话，可以这样写
form:has(:focus){
background-color:black;
}
到此这篇关于CSS⼦元素选择⽗元素的实现的⽂章就介绍到这了，更多相关CSS⼦元素选择⽗元素内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。