练习05-CSS基础选择器

OranTech2025-12-26 19:18

题目1：元素选择器

请利用CSS选择器，给古诗的标题和诗句设置不同的颜色。要求：

将标题元素的字体颜色设置为red；
将段落元素的字体颜色设置为blue。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>古诗赏析</title>
    <style>
        /* TODO 设置标题的颜色为red */
        h3 {
            color:red;
        }

        
        /* TODO 设置段落的颜色为blue */
        p {
            color:blue;
        }
    </style>
</head>
<body>
    <h3>登鹳雀楼</h3>
    <p>白日依山尽，黄河入海流。</p>
    <p>欲穷千里目，更上一层楼。</p>
</body>
</html>

题目2：类和ID选择器

请利用CSS选择器，给张三的基本信息和身份证号码设置不同的颜色。要求：

将类名为info的元素颜色设置为green；
将id属性值为id-card的元素颜色设置为blue。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <style>
        /* TODO 设置类名为info的元素颜色为green */
        .info {
            color:green;
        }




        
        /* TODO 设置id属性值为id-card的元素颜色为blue */
        #id-card {
            color:blue;
        }



        
    </style>
</head>
<body>
    <h2>张三</h2>
    <p class="info">年龄：30 岁</p>
    <p class="info">职业：工程师</p>
    <p id="id-card">身份证号码：1234567890</p>
</body>
</html>

小知识点

引用css的方式有三种：一种是嵌入head标签里，另一种是使用link标签引入css文件，最后一种是内联样式，直接在html元素标签撰写，这种要少用。

基础选择器有三种：元素选择器（直接使用元素）、类选择器（使用.）、id选择器（使用#）