vertical-align
一、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;
}