Educoder CSS3选择器-组合选择器

最新推荐文章于 2024-10-08 11:32:20 发布

是小鹿啊

最新推荐文章于 2024-10-08 11:32:20 发布

阅读量270

点赞数 2

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

来自是小鹿啊的博客

本文链接：https://blog.csdn.net/m0_51511286/article/details/122021677

版权

前端同时被 2 个专栏收录

40 篇文章 2 订阅

订阅专栏

Educoder

35 篇文章 2 订阅

订阅专栏

CSS3选择器-组合选择器

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

通关代码

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

2、阅读下面的HTML代码

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

若对<em>标签和<p>标签中的文字设置同样的字号大小，下面的选项正确的是（C）
A、em  p{font-size:14px}
B、em > p{font-size:14px}
C、em , p{font-size:14px}
D、em~p{font-size:14px}

3、 阅读下面的HTML代码

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

若对<div>标签中<p>标签的文字设置同样的颜色，下面的选项正确的是（A）
A、div p{color:red;}
B、p div{color:red;}
C、div+p{color:red;}
D、div~p{color:red;}

第2关：群组选择器

编程要求

请在右侧编辑器中的Begin - End区域内补充样式代码，具体要求是：

运用群组选择器依序对<h1>``<h2>``<h3>标签的文本颜色进行样式设置
文本颜色值设置为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区域内补充样式代码，具体要求是：

运用后代选择器对<div>标签中<p>标签的文本颜色和字号属性进行样式设置
先将文本颜色值设置为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区域内补充样式代码，具体要求是：

运用子元素选择器对<div>标签中<p>标签的文本颜色和字号属性进行样式设置
先将文本颜色值设置为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关：相邻兄弟选择器

编程要求

请在右侧编辑器中的Begin - End区域内补充样式代码，具体要求是：

运用相邻兄弟选择器对<h1>标签下<p>标签的文本添加背景色
背景颜色值设置为red

通关代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>相邻兄弟选择器</title>
    <!-- ********* Begin ********* -->
    <style type="text/css">
      h1+p {
          background-color: red;
      }
    </style>
    <!-- ********* End ********* -->
</head>
<body>
<div>
    <h1>我是兄长</h1>
    <p>我是弟弟</p>
    <p>我是小弟</p>
</div>
</body>
</html>

第6关：普通兄弟选择器

编程要求

请在右侧编辑器中的Begin - End区域内补充样式代码，具体要求是：

运用普通兄弟选择器对<h1>标签下所有<p>标签的文本颜色和字号样式进行设置
文本颜色值设置为blue
文本字号设置为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>