web前端（CSS选择器练习作业）

最新推荐文章于 2024-06-18 17:22:31 发布

正儿八经的地球人

最新推荐文章于 2024-06-18 17:22:31 发布

阅读量205

点赞数

分类专栏： web前端基础文章标签：前端 css

本文链接：https://blog.csdn.net/miss_copper/article/details/131886190

版权

web前端基础专栏收录该内容

14 篇文章 1 订阅

订阅专栏

作业要求：

1，用外部样式

2，选取主标题（<h1>）将颜色改成粉色

3，选取所有列表项（<li>）

4，选取第一个列表项。背景颜色改为红

5，选取最后一个列表项，背景颜色改为绿

6，选取容器内带有"class"为"text"的段落

7，选取容器内的第一个盒子

8，选取所有带有"class"为"text"的元素（无论其在容器内还是容器外）。
例题代码如下：

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

展示如下图：