一般一个CSS选择器都是从上往下选择的,经过父元素选择子元素,那么能不能经过子元素选择父元素呢?css
<ul> <li> <a href="#" class="active">1</a> </li> <li> <a href="#">2</a> </li> </ul>
若是我想选择包含 a.active 的 li 该怎么实现呢? 目前咱们学到的CSS好像是没有办法的,不过今天要将的一个CSS伪类 :has() 就有这个功能,虽然还处于草案阶段,可是仍是能够提早了解一下。html
li:has(> a.active){ color:red; }
除了表示包含,:has 还能够表示兄弟跟随关系code
div:has(+ p){ color:red; }
表示选择 <div> 标签,前提是这个div标签必须是被一个<p>紧跟着的。此外还能够与:not 一块儿使用orm
article:not(:has(a)){ color:red; }
表示不包含 <a> 的 <article>标签。注意这里 :not 和 :has 的前后顺序,不一样顺序表明不一样的意思htm
article:has(:not(a)){ color:red; }
表示包含非 <a> 的 <article>标签it
其实咱们前面讲过的 :focus-within 也是一个经过子元素选择父元素的伪类,只不过条件只能是子元素是否获取焦点, 而 :has 则更灵活和强大。form
form:focus-within{ background-color:black; }
若是经过 :has 实现的话, 能够这样写class
form:has(:focus){ background-color:black; }