00031.【CSS】伪类的简单使用


<template>
  <!--
    伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时 ，
    或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个
    类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易维护。
  -->
  <article class="a">
    <p class="first">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
      tomatillo
      melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
      greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
  </article>

  <article class="b">
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
      melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
      greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
  </article>
</template>

<script setup>

</script>

<style scoped>
.a .first {
  font-size: 120%;
  font-weight: bold;
}

.b p:first-child {
  font-size: 120%;
  font-weight: bold;
}
</style>