当前位置：首页 > news >正文

css-伪类选择器

news 来源：原创 2024/9/20 7:59:35

css记录

选择器
- 伪类选择器
- - :is、:where
  - :has

选择器

伪类选择器

:is、:where

栗子完整代码

<template><section class="is-styling"><p>我是is的section</p></section>![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/b0d3967ff5c147ba91c6680f1d93250b.png)<aside class="is-styling"><p>我是is的aside</p></aside><footer class="is-styling"><p>我是is的footer</p></footer><br /><section class="where-styling"><p>我是where的section</p></section><aside class="where-styling"><p>我是where的aside</p></aside><footer class="where-styling"><p>我是where的footer</p></footer>
</template><script setup></script><style lang="scss" scoped>
:is(section.is-styling, aside.is-styling, footer.is-styling) p {color: red;
}:where(section.where-styling, aside.where-styling, footer.where-styling) p {color: green;
}
</style>

栗子实现的效果-:is和:where后跟选择器列表时-作用一样：

在这里插入图片描述

:where后跟条件的栗子完整代码

<template><section class="is-styling"><p>我是is的section</p></section><aside class="is-styling"><p>我是is的aside</p></aside><footer class="is-styling"><p>我是is的footer</p></footer><br /><section class="where-styling"><p>我是where的section</p></section><aside class="where-styling"><p>我是where的aside</p></aside><footer class="where-styling"><p>我是where的footer</p></footer></template><script setup></script><style lang="scss" scoped>
section:where([class^="where"]) {font-weight: bold;
}
</style>

上面栗子实现的效果：
在这里插入图片描述

相同点： :is、:where选择器都是根据条件来定位元素。
不同点： :is()用于根据选择器列表匹配元素，保持原有选择器的特定性。而:where()不仅可以根据选择器列表匹配元素，而且可根据条件匹配元素。同时降低选择器的优先级，避免因选择器过长而导致的优先级问题。

:has

可以用于**基于后代元素**来定位元素，根据元素内部是否存在特定的子元素来选择该元素。

栗子完整代码

<template><section class="is-styling"><p>我是is的section</p></section><aside class="is-styling"><p>我是is的aside</p></aside><footer class="is-styling"><p>我是is的footer</p></footer><br /><section class="where-styling"><p>我是where的section</p><span>我是span元素</span></section><aside class="where-styling"><p>我是where的aside</p></aside><footer class="where-styling"><p>我是where的footer</p></footer></template><script setup></script><style lang="scss" scoped>
section:has(span) {background: orange;
}
</style>