<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>