關系選擇符 · 跟濤哥學前端

## 2. 關系選擇符 ### 包含選擇符（E F）選擇所有被E元素包含的F元素。與子選擇符不同的是，包含選擇符將會命中所有符合條件的后代，包括兒子，孫子，孫子的孫子... ~~~ /*包含選擇符(E F) */ div p{ color:red; } ~~~ ### 子選擇符（E>F）選擇所有作為E元素的子元素F。與包含選擇符不同的是，子選擇符只能命中子元素，而不能命中孫輩。 ~~~ /* 子選擇符(E>F) */ .wrap>p{ background: #008000; } ~~~ ### 相鄰選擇符（E+F）選擇緊貼在E元素之后F元素。與兄弟選擇符不同的是，相鄰選擇符只會命中符合條件的相鄰的兄弟元素。 ~~~ p+p{ color:#00BFFF; } ~~~ ### 兄弟選擇符（E~F）選擇E元素后面的所有兄弟元素F。與相鄰選擇符不同的是，兄弟選擇符會命中所有符合條件的兄弟元素，而不強制是緊鄰的元素 ~~~ p~h3{ background: #00FF00; } ~~~ * * * * * **關系選擇符完整代碼** ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*包含選擇符(E F) */ /*選擇所有被E元素包含的F元素。與子選擇符不同的是，包含選擇符將會命中所有符合條件的后代，包括兒子，孫子，孫子的孫子...*/ div p{ color:red; } /* 子選擇符(E>F) */ /*選擇所有作為E元素的子元素F。與包含選擇符不同的是，子選擇符只能命中子元素，而不能命中孫輩。*/ .wrap>p{ background: #008000; } /* 相鄰選擇符(E+F) */ /*選擇緊貼在E元素之后F元素。與兄弟選擇符不同的是，相鄰選擇符只會命中符合條件的相鄰的兄弟元素。*/ p+p{ color:#00BFFF; } /* 兄弟選擇符(E~F) */ /*選擇E元素后面的所有兄弟元素F。與相鄰選擇符不同的是，兄弟選擇符會命中所有符合條件的兄弟元素，而不強制是緊鄰的元素。*/ p~h3{ background: #00FF00; } </style> </head> <body> <div class="wrap"> <p>0000000</p> <div class="box"> <p>11111</p> </div> <div class="box2"> <p>222222</p> <div class="box2_in"> <p>2111111</p> </div> </div> </div> <hr /> <p>p1</p> <p>p2</p> <h3>這是一個標題</h3> <p>p3</p> <h3>這是一個標題</h3> <p>p4</p> <p>p5</p> </body> </html> ~~~