HTML 5--Grouping and Nesting Styles

1.

Sample code:

 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>  

 

 

Test Results:

2.

Only the <p> mark immediately after the <div> will turn blue

Sample code:

 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>  

 

Test Results:

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325078714&siteId=291194637