作业要求:
<!-- 用外部样式 -->
<!-- 选取主标题(<h1>)将颜色改成粉色。
选取所有列表项(<li>)。
选取第一个列表项。背景颜色改为红
选取最后一个列表项。背景颜色改为绿
选取容器内带有"class"为"text"的段落。
选取容器内的第一个盒子。
选取所有带有"class"为"text"的元素(无论其在容器内还是容器外)。 -->
01.代码
<!DOCTYPE html>
<html>
<style>
h1{
color: pink;
}
</style>
<style>
li{
}
</style>
<style>
li:first-child{
background-color: red ;
}
</style>
<style>
li:last-child{
background-color: green;
}
</style>
<style>
.container.text{
}
</style>
<style>
.container div.box:first-child{
}
</style>
<style>
.text{
}
</style>
<head>
<title>CSS选择器练习题</title>
</head>
<body>
<div class="container">
<h1>主标题</h1>
<ul class="list">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<p class="text">这是一个段落。</p>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
</div>
<p class="text">另一个在容器外的段落。</p>
</body>
</html>
运行结果: