<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 基础选择器示例</title>
<style>
/* 元素选择器 */
p {
color: blue;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#unique-id {
color: red;
}
/* 后代选择器 */
div p {
font-style: italic;
}
/* 子选择器 */
ul > li {
list-style-type: none;
}
/* 相邻兄弟选择器 */
h1 + p {
font-size: 18px;
}
/* 通用兄弟选择器 */
h1 ~ p {
margin-top: 20px;
}
</style>
</head>
<body>
<p>这是一个普通的段落，应用了元素选择器。</p>
<p class="highlight">这是一个高亮显示的段落，应用了类选择器。</p>
<div id="unique-id">这是一个ID为unique-id的div，它的文本应用了ID选择器。</div>
<div>
<p>这个段落位于div内部，应用了后代选择器。</p>
</div>
<ul>
<li>列表项1，应用了子选择器。</li>
<li>列表项2，也应用了子选择器。</li>
</ul>
<h1>标题</h1>
<p>这个段落紧接在h1之后，应用了相邻兄弟选择器。</p>
<p>这个段落也在h1之后，但由于不是紧接的，所以只应用了通用兄弟选择器的样式。</p>
</body>
</html>在这个例子中，我们有一个HTML文档，其中包含了各种元素，并且针对这些元素使用了CSS3中的基础选择器来应用样式。
网站内容来自网络，如有侵权请联系我们，立即删除！
Copyright © 建站教程网 琼ICP备2023010660号-44
