1.
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 ????h1{ 6 ????????text-align: center; 7 ????} 8 ????</style> 9 </head>10 <body>11 <h1>BookYourHotel</h1>12 <ul>13 ????<li><a href="html5-2/images/背景.jpg">About us</a></li>14 ????<li><a href="html5-2/images/背景1.jpg">Rooms</a></li>15 ????<li><a href="html5-2/images/背景2.jpg">Facilities</a></li>16 ????<li><a href="html5-2/images/背景3.jpg">Contact Us</a></li>17 </ul>18 <hr>19 <h3>Welcome to the Home page</h3>20 <P> BookYourHotel welcome you with your warmth and a feeling that each quest is truly special.It offers a cozy and intimate experience amidst the glitz and glamour of South America.Our caring and courteous staffs are ever eager to ensure that all individual needs are cared for with professional expertise and a personal touch.</P>21 <P>The rooms have been designed with different floor plans to create ensuite Bathrooms .</P>22 23 </body>24 </html> ?测试结果：
2.
只有在紧接着<div>后面的<p>标志会变成蓝色
示例代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 ????div+p{background-color:blue;} 6 ????</style> 7 </head> 8 <body> 9 <h1>Welcome to the page.</h1>10 <div>11 ????<P>This is pagagraph 1</P>12 </div>13 <P>This is pagagraph 2</P>14 15 <p>This is pagagraph 3</p>16 </body>17 </html> ?测试结果：
HTML 5--Grouping and Nesting Styles
原文地址：https://www.cnblogs.com/Catherinezhilin/p/8971313.html