00016.【CSS】演示CSS基础功能的简单案例


<template>
  <h1>我是一级标题</h1>

  <p>这是一个段落文本。在文本中有一个 <span>span element</span>
    并且还有一个 <a href="http://example.com">链接</a>.</p>

  <p>这是第二段。包含了一个 <em>强调</em> 元素。</p>

  <ul>
    <li>项目 1</li>
    <li class="special">项目 2</li>
    <li>项目 <em>三</em></li>
  </ul>
</template>

<script setup>

</script>

<style scoped>
h1 {
  color: red;
}

p {
  color: green;
}

p, li {
  color: green;
}

li {
  list-style-type: square;
}

.special {
  color: orange;
  font-weight: bold;
}

li em {
  color: rebeccapurple;
}

h1 + p {
  font-size: 200%;
}

a:link{
  color: pink;
}

a:visited{
  color: green;
}

a:hover{
  text-decoration: none;
}

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}


</style>