<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 组合选择器 : 使div标签下的p标签字体变大*/
/* 1.后代选择器 */
/*div p{*/
/**/
/*font-size: 45px;*/
/*}*/
/*div .c1{*/
/*color:green;*/
/*font-size: 50px;*/
/*}*/
/*#outer .c1{*/
/**/
/*}*/
/*#outer .c2 .c1{*/
/**/
/*}*/
/*2.子代选择器 */
/*#outer>.c1{*/
/**/
/*}*/
/*3.并列选择器 */
/*#p4,#p1,.c4{*/
/*font-size: 50px;*/
/*}*/
/* 4.毗邻选择器:只选择与其相邻的下一个*/
#outer+p{
color:blueviolet;
}
</style>
</head>
<body>
<p>helloo star</p>
<p id="p4">hi Ann</p>
<div id="outer">hello china
<span>hello span</span>
<p id="p1">p2..............</p>
<p class="c1">c1....</p>
<p class="c1">c2....</p>
<div class="c2">
<p class="c1">c3...</p>
</div>
</div>
<p>best wishes</p>
<p>best xingxing</p>
<div class="c1">hello throne</div>
<div class="c4">hello Ann</div>
</body>
</html>
原文：https://www.cnblogs.com/startl/p/12153080.html