css记录
选择器
伪类选择器
: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>
栗子实现的效果: