包含选择符（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>