<!DOCTYPE html>
<html>
<head>
<style>
.center { text-align: center;
}
p.large { font-size: 200%;
}
p.fancy.beige { font-family: 'Courier New', monospace;
background-color: beige;
border: 2px solid green;
}
p.ex1 .ex2 { background-color: yellow;
}
</style>
</head>
<body>
<h1>.class 选择器实例</h1>
<h2 class="center">这个标题将居中对齐</h2>
<p>这个段落不会受到影响。</p>
<p class="center">这个段落将居中对齐。</p>
<p class="center large">这个段落将居中对齐，并且字体较大。</p>
<p class="fancy large beige">这个段落将使用等宽字体，具有背景颜色和边框，并且字体较大。</p>
<p class="ex1">这个段落内部有一个 <span class="ex2">span 元素</span>，它将被样式化。</p>
</body>
</html>