00033.【CSS】简单接触一下伪元素及伪元素和伪类的混合使用


<template>
  <!-- 伪元素表现得是像你往编辑文本中加入权限的HTML元素一样，而不是向现有的元素上应用类 -->
  <!--
    可不可以这么理解：伪元素更偏向于从无到有的创造这个元素的概念， 而伪类更多的是
    向一个完整的元素上增加一个类。比如first-line这个伪元素，这个元素是不存在的，
    是凭空创造出这个元素的；比如first-child这个伪类，首先p元素是存在的，所以这个
    伪类附着在了这个元素上。

    伪元素和伪类还有一个区别：伪类就是选择当前的元素，只是在不同的状态下；伪元素选
    择的是当前元素的一个实际不存在的元素。
  -->

  <article>
    <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>
article p::first-line {
  font-size: 120%;
  font-weight: bold;
}

article p:first-child::first-line {
  font-size: 200%;
  font-weight: bold;
}
</style>