㊑CSS子原素挑选父原素的完成

日期:2021-03-24 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

一般一个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)){
    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子原素挑选父原素內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!