Web(六)CSS3语法-CSS3选择器-组合选择器
第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关：后代选择器
编程要求
请在右侧编辑器中的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关：相邻兄弟选择器
编程要求
请在右侧编辑器中的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关：普通兄弟选择器
编程要求
请在右侧编辑器中的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>