开发者学堂课程【CSS 快速掌握：复合元素选择器】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9174
复合元素选择器
内容介绍
一、复合选择器
二、范例
一、复合选择器
选择器 |
含义 |
举例 |
选择器1，选择器2{属性：值}多元素选择器 |
多元素选择器同时匹配选择器1和选择器2，多个选择器之间用逗号分隔 |
p,h1,h2{marqin:0px} |
E F{属性：值}后代元素选择器 |
后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 |
#slidebar p{font-color:#990000:} |
E>F{属性：值；}子元素选择器 |
子元素选择器，匹配所有E元素的子元素F |
div>p{color:#990000;} |
E+F{属性：值；}相邻元素选择器 |
相邻元素选择器，匹配所有紧随E元素之后的同级元素F |
div+div{color:#990000；} |
二、范例
1. 多元素选择器
格式：选择器1，选择器2，选择器n{属性：值；}
作用：给列表中的所有选择器设置样式
<meta charset="UTF-8">
<title>多元素选择器</title>
<style type="text/css">
.box,p,h2,li{
coLor:#f00;/*给文字设置颜色*/
text-decoration : underline;
}
</style>、
</head>
<body>
<div class="box">HTML</div>
p>CSS</p>
<h2>php</h2>
<ul>
<li> 北京</li>
<li> 广州</li>
<li>上海</li>
<li> 深圳</li>
2. 后代元素选择器
格式：E F{属性：值}
作用：
匹配 .box 这个盒子里面的所有的 h2 后代元素
<meta charset="UTF-8">
<title>后代元素选择器</title>
<style type="text/css">
.box h2{
coLor: #f00; /*给文字设置颜色*/
text-decoration : overline; /*给文字设置上划线*/
}
</style>
</ head>
<body>
<div class="box">
<h2>HTML</h2>
<div>
<h2>CSS</h2>
</div>
<h2>PHP</h2>
</div>
< / body>
</ html>
3. 子元素选择器
格式E>F{属性：值;}
作用：匹配.box下面的h2子元素 只匹配一级元素
<meta charset="UTF-8">
<title>子元素选择器</title>
<style type="text/css">
.box>h2{
coLor: #f00; /*给文字设置颜色*/
text-decoration : overline; /*给文字设置上划线*/
}
</style>
</ head>
<body>
<div class="box">
<h2>HTML</h2>
<div>
<h2>CSS</h2>
</div>
<h2>PHP</h2>
</div>
< / body>
</ html>
4. 相邻元素选择器
格式：E+F
作用：要满足以下前提才会匹配：
1.E 元素与 F 元素必须是兄弟关系
2.E 元素与 F 元素必须紧挨着 之间没有元素阻挡
3.要求 F 元素一定是在E元素的下面
<meta charset="UTF-8">
<title>相邻元素选择器</title>
<style type="text/css">
.box+h2{
coLor: #f00; /*给文字设置颜色*/
text-decoration : overline; /*给文字设置上划线*/
}
</style>
</ head>
<body>
<p>我在上面<p/>
<div class="box">
<h2>HTML</h2>
<div>
<h2>CSS</h2>
</div>
<h2>PHP</h2>
</div>
<p>我在下面<p/>
< / body>
</ html>
