关系选择符 · 跟涛哥学前端

## 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> ~~~