educoder实训平台----CSS3选择器-组合选择器
第1关:组合选择器相关的概念
ACA
第2关:群组选择器
<!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关:后代选择器
<!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关:子元素选择器
<!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关:相邻兄弟选择器
<!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关:普通兄弟选择器
<!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>