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>

栗子实现的效果：