educoder实训平台----CSS3选择器-组合选择器
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>
上一篇：
IDEA上Java项目控制台中文乱码