第1关：组合选择器相关的概念
任务描述
本关任务：完成一组CSS组合选择器相关的概念题。
相关知识
为了完成本关任务，你需要掌握：1.群组选择器，2.后代选择器，3.子元素选择器，4.相邻兄弟选择器，5.普通兄弟选择器。
群组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。
-
样式格式
标签名,标签名{属性1:属性值1; 属性2:属性值2;}
-
用法示例 h1,h2,h3{color:green;}
后代选择器
当标签发生嵌套时，内层标签就成为外层标签的后代。后代选择器用来选择元素或元素组的后代，选择器的写法是外层元素写在前面，内层元素写在后面，中间用空格分隔。
- 样式格式
外层元素,内层元素{属性1:属性值1; 属性2:属性值2;}
-
用法示例
div p {background-color:#CCC; }
子元素选择器
子元素选择器选取某个元素的直接子元素（间接子元素不适用）；子元素选择器元素之间使用大于号（>）隔开。
- 样式格式
父元素>子元素{属性1:属性值1; 属性2:属性值2;}
-
用法示例
div>p {background-color:#CCC; }
相邻兄弟选择器
相邻兄弟选择器用于选择紧接在某元素之后的弟元素。相邻兄弟选择器元素之间使用加号（+）隔开。
- 样式格式
兄元素+相邻弟元素{属性1:属性值1; 属性2:属性值2;}
-
用法示例
div+p {background-color:#CCC; }
普通兄弟选择器
普通兄弟选择器用于选择在某元素之后的弟元素。普通兄弟选择器元素之间使用加号（~）隔开。
- 样式格式
兄元素~弟元素{属性1:属性值1; 属性2:属性值2;}
-
用法示例
div~p {background-color:#CCC; }
ACA
第2关：群组选择器任务描述
本关任务：完成群组选择器样式的设置
相关知识
为了完成本关任务，你需要掌握：1.群组选择器样式设置方法，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关：后代选择器任务描述
本关任务：完成后代选择器样式的设置
相关知识
为了完成本关任务，你需要掌握：1.后代选择器样式设置方法，2.文本颜色和字号属性的设置
编程要求
请在右侧编辑器中的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关：子元素选择器
任务描述
本关任务：完成子元素选择器样式的设置
相关知识
为了完成本关任务，你需要掌握：1.子元素选择器样式设置方法，2.文本颜色和字号属性的设置
编程要求
请在右侧编辑器中的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关：相邻兄弟选择器
任务描述
本关任务：完成相邻兄弟选择器样式的设置
相关知识
为了完成本关任务，你需要掌握：1.相邻兄弟选择器样式设置方法，2.文本背景颜色的设置
background-color
background-color属性可用于设置元素的背景颜色。
- 样式示例
body{background-color:yellow;}h1{background-color:#00ff00;}
编程要求
请在右侧编辑器中的Begin - End区域内补充样式代码，具体要求是： -
1.运用相邻兄弟选择器对
<h1>标签下<p>标签的文本添加背景色 2.背景颜色值设置为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关：普通兄弟选择器任务描述
本关任务：完成普通兄弟选择器样式的设置
相关知识
为了完成本关任务，你需要掌握：1.相邻兄弟选择器样式设置方法，2.文本颜色和字号的设置
编程要求
请在右侧编辑器中的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>
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
