CSS选择符-----关系选择符
包含选择符(E F)
选择所有被E元素包含的F元素
- 与 子选择符(E>F) 不同的是,包含选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #firstdiv p{ color: #0000FF; font-weight: bold; } </style> </head> <body> <div id="firstdiv"> <p>第一个段落。</p> <p>第二个段落。</p> <ul> <li>Java</li> <li>C#</li> </ul> <div> <p>第三个段落。</p> </div> </div> </body> </html>
子选择符(E>F)
选择所有作为E元素的子元素F
- 与 包含选择符(E F) 不同的是,子选择符只能命中子元素,而不能命中孙辈
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #firstdiv>p{ color: #0000FF; font-weight: bold; } </style> </head> <body> <div id="firstdiv"> <p>第一个段落。</p> <p>第二个段落。</p> <ul> <li>Java</li> <li>C#</li> </ul> <div> <p>第三个段落。</p> </div> </div> </body> </html>
相邻选择符(E+F)
选择紧贴在E元素之后F元素,元素E与F必须同属一个父级
- 与 兄弟选择符(E~F) 相同的是,相邻选择符也是选择同级的元素F;不同的是,相邻选择符只会命中符合条件的那个毗邻的兄弟元素(即紧挨着E元素之后的第一个F元素)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul+div{ color: #0000FF; font-weight: bold; } </style> </head> <body> <div id="firstdiv"> <p>第一个段落。</p> <p>第二个段落。</p> <ul> <li>Java</li> <li>C#</li> </ul> <div> <p>第三个段落。</p> </div> <div> <p>第四个段落。</p> </div> </div> </body> </html>
兄弟选择符(E~F)
选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级
- 需要注意的是,选择的只是同级的元素F,后代中的元素F不会被选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul~div{ color: #0000FF; font-weight: bold; } </style> </head> <body> <div id="firstdiv"> <p>第一个段落。</p> <p>第二个段落。</p> <ul> <li>Java</li> <li>C#</li> </ul> <div> <p>第三个段落。</p> </div> <div> <p>第四个段落。</p> </div> </div> </body> </html>