1、后代选择器

所有被E元素包含的F元素起会起效，不管F元素在第几层中都起效，中间用空格隔开
语法 E F{}，示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>关系选择器</title>
  7.     <style>
  8.        /* ul标签中所有的li标签都会起效 */
  9.        ul li{
  10.         color:green;
  11.        }
  12.     </style>
  13. </head>
  14. <body>
  15.     <ul>
  16.         <li>宝马</li>
  17.         <li>奔驰</li>
  18.         <li>奥迪</li>
  19.         <div>
  20.             <ol>
  21.                 <li>大众</li>
  22.                 <li>丰田</li>
  23.                 <li>本田</li>
  24.             </ol>
  25.         </div>
  26.     </ul>
  27. </body>
  28. </html>

2、子代选择器

被E元素包含的第一层F元素起效，对更深一层的F元素不起效，中间用>隔开
语法 E>F{}，示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>关系选择器</title>
  7.     <style>
  8.        /* ul中第一层li标签会起效，更深一层的不起效 */
  9.        ul>li{
  10.         color:green;
  11.        }
  12.     </style>
  13. </head>
  14. <body>
  15.     <ul>
  16.         <li>宝马</li>
  17.         <li>奔驰</li>
  18.         <li>奥迪</li>
  19.         <div>
  20.             <ol>
  21.                 <li>大众</li>
  22.                 <li>丰田</li>
  23.                 <li>本田</li>
  24.             </ol>
  25.         </div>
  26.     </ul>
  27. </body>
  28. </html>

3、相邻兄弟选择器

紧跟E元素后的第一个同级F元素起效，非同级非后面第一个的F元素不起效，中间用+隔开
语法 E+F{}，示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>关系选择器</title>
  7.     <style>
  8.        /* h3标签后的第一个同级p标签起效，其它的不起效 */
  9.        h3+p{
  10.         color:green;
  11.        }
  12.     </style>
  13. </head>
  14. <body>
  15.     <h3>我是h3标题</h3>
  16.     <p>我是第一个p</p>
  17.     <p>我是第二个p</p>
  18. </body>
  19. </html>

4、通用兄弟选择器

紧跟E元素后的所有同级F元素起效，非同级更深一层的F元素不起效，中间用~隔开
语法 E~F{}，示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>关系选择器</title>
  7.     <style>
  8.        /* h3标签后的所有同级的p标签会起效，更深一层的不起效 */
  9.        h3~p{
  10.         color:green;
  11.        }
  12.     </style>
  13. </head>
  14. <body>
  15.     <h3>我是h3标题</h3>
  16.     <p>我是第一个p</p>
  17.     <p>我是第二个p</p>
  18. </body>
  19. </html>