css伪类where、is、has用法

目录

一、where

1、作用

2、用法

3、优先级

二、is

1、作用

2、用法

3、优先级

三、has

1、作用

2、用法

3、优先级

css伪类where、is、has用法

一、where

1、作用

:where()  CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

2、用法

:where(div p) span {
    color: yellow;
}

<div class="test-div">
    <span>哈哈</span>
</div>
<p class="test-p">
    <span>哈哈</span>
</p>

3、优先级

:where()的优先级是 0，我们可以看下面代码

.test {
    color: yellow;
}
:where(.test) {
    color: pink
}

//最后字体的颜色是yellow

二、is

1、作用

:is()跟:where()可以说一模一样，区别就是 :is()的优先级不是0，而是由传入的选择器来决定的，拿刚刚的代码来举个例子

2、用法

div {
    color: yellow;
}
:where(.test) {
    color: pink
}

<div class="test">哈哈</div>

3、优先级

上面的代码要是 :where()，那么字体颜色会是 yellow，因为它的优先级是 0

但是如果是 :is()的话，字体颜色会是 pink，因为 类选择器 优先级比 标签选择器 优先级高~

三、has

1、作用

有某个条件的时候，才生效的样式

举一个场景例子，我们看以下代码，一个容器中，图片是可以显隐的，我想要实现：

• 图片显示时，字体大小为 12px

• 图片隐藏时，字体大小为 20px

2、用法

<div class="container">
    哈哈哈哈哈
    <img class="test-img" v-if="showImg"></img>
</div>

使用has：

.container {
    font-size: 20px;
}
.container:has(img) {
    font-size: 12px;
}

或者
.container:has(.test-img) {
    font-size: 12px;
}

3、优先级