CSS3选择器-组合选择器

最新推荐文章于 2023-08-30 17:15:45 发布

静待花开︳

最新推荐文章于 2023-08-30 17:15:45 发布

阅读量539

点赞数 1

分类专栏： Web前端 educoder 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_52184490/article/details/121918760

版权

educoder 同时被 2 个专栏收录

51 篇文章 9 订阅

订阅专栏

Web前端

35 篇文章 2 订阅

订阅专栏

第1关：组合选择器相关的概念

1、当几个元素样式属性一样时，可以共同调用一个样式声明，元素之间用逗号隔开 A.正确

2、阅读下面的HTML代码

<div>
<em>大家好</em>
<p>今天天气很好</p>
<p>适合去郊游</p>
</div>

若对<em>标签和<p>标签中的文字设置同样的字号大小，下面的选项正确的是（）

C.em , p{font-size:14px}

3、阅读下面的HTML代码

<div>
<em>大家好</em>
<p>今天天气很好</p>
<p>适合去郊游</p>
</div>

若对<div>标签中<p>标签的文字设置同样的颜色，下面的选项正确的是（）

A.div p{color:red;}

第2关：群组选择器

编程要求

请在右侧编辑器中的Begin - End区域内补充样式代码，具体要求是： 1.运用群组选择器依序对<h1>``<h2>``<h3>标签的文本颜色进行样式设置 2.文本颜色值设置为green

测试说明

补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。特别说明：考虑输入方便和检测程序设置的需要，样式属性的取值不加引号

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>群组选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
        h1,h2,h3{
            color:green;
        }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
   <h1>一级标题</h1>
   <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>
</html>

第3关：后代选择器

编程要求

请在右侧编辑器中的Begin - End区域内补充样式代码，具体要求是： 1.运用后代选择器对<div>标签中<p>标签的文本颜色和字号属性进行样式设置 2.先将文本颜色值设置为blue 3.再将文本字号值设置为16px

测试说明

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>后代选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
        div p{
            color:blue;
            font-size:16px; 
        }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <p>我的颜色是蓝色，我的字体大小是16px</p>
</div>
</body>
</html>

第4关：子元素选择器

编程要求

请在右侧编辑器中的Begin - End区域内补充样式代码，具体要求是： 1.运用子元素选择器对<div>标签中<p>标签的文本颜色和字号属性进行样式设置 2.先将文本颜色值设置为green 3.再将文本字号值设置为20px

测试说明

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>子元素选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
        div>p{
            color:green;
            font-size:20px;
        }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <p>我的颜色是绿色，我的字体大小是20px</p>
</div>
</body>
</html>

第5关：相邻兄弟选择器

任务描述

本关任务：完成相邻兄弟选择器样式的设置

第6关：普通兄弟选择器

任务描述

本关任务：完成普通兄弟选择器样式的设置

编程要求

请在右侧编辑器中的Begin - End区域内补充样式代码，具体要求是： 1.运用普通兄弟选择器对<h1>标签下所有<p>标签的文本颜色和字号样式进行设置 2.文本颜色值设置为blue 3.文本字号设置为36px

测试说明

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>普通兄弟选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
       h1~p{
           color:blue;font-size:36px;
           }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <h1>我是兄长</h1>
    <p>我是弟弟</p>
    <p>我是小弟</p>
</div>
</body>
</html>

静待花开︳

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3选择器-组合选择器

第1关：组合选择器相关的概念1、当几个元素样式属性一样时，可以共同调用一个样式声明，元素之间用逗号隔开 A.正确2、阅读下面的HTML代码<div><em>大家好</em><p>今天天气很好</p><p>适合去郊游</p></div> 若对<em>标签和<p>标签中的文字设置同样的字号大小，下面的选项正确的是（）C.em , p{font-size:14px}3、阅读下面的HTML代码<div><em>大家好</em><p>今天天气
复制链接

扫一扫