1.div空格p:表示选择div中所有的p
<html> <head> <title> 小朋友 </title> <style> div p{ background-color: darkorange; color:aliceblue; } </style> </head> <body> <p>Hello1</p> <p>Hello2</p> <div> <p>Hello3</p> <p>Hello4</p> <span><p>hello5</p></span> </div> <p>Hello6</p> <p>Hello7</p> </body> </html>2.div>p:只选择div的直系子女
<html> <head> <title> 小朋友 </title> <style> div>p{ background-color: darkorange; color:aliceblue; } </style> </head> <body> <p>Hello1</p> <p>Hello2</p> <div> <p>Hello3</p> <p>Hello4</p> <span><p>hello5</p></span> </div> <p>Hello6</p> <p>Hello7</p> </body> </html>3.div+p:只选择之后的第一个p
<html> <head> <title> 小朋友 </title> <style> div+p{ background-color: darkorange; color:aliceblue; } </style> </head> <body> <p>Hello1</p> <p>Hello2</p> <div> <p>Hello3</p> <p>Hello4</p> <span><p>hello5</p></span> </div> <p>Hello6</p> <p>Hello7</p> </body> </html>4.div~p:选择div之后所有的p
<html> <head> <title> 小朋友 </title> <style> div~p{ background-color: darkorange; color:aliceblue; } </style> </head> <body> <p>Hello1</p> <p>Hello2</p> <div> <p>Hello3</p> <p>Hello4</p> <span><p>hello5</p></span> </div> <p>Hello6</p> <p>Hello7</p> </body> </html>