实例演示四种上下文选择器的使用场景

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
实例演示四种上下文选择器的四种使用场景

1.父[]子选择器>

程序

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>实例演示上下文选择器的四种使用场景</title>
  8. </head>
  9. <body>
  10.     <ul class="list">
  11.         <li class="item">item1</li>
  12.         <li class="item">item2</li>
  13.         <li class="item">item3</li>
  14.         <li class="item">item4</li>
  15.         <li class="item">item5</li>
  16.         <li class="item">item6</li>
  17.     </ul>
  18.     <style>
  19.         .list > .item {
  20.             border: 1px solid #000;
  21.         }
  22.     </style>
  23. </body>
  24. </html>

web显示

2.后代选择器空格

程序

  1.     <ul class="list">
  2.         <ul class="list">
  3.             <li class="item">item1</li>
  4.             <li class="item">item2</li>
  5.             <li class="item">
  6.                 item3
  7.                 <ul>
  8.                     <li class="item">item3-1</li>
  9.                     <li class="item">item3-2</li>
  10.                     <li class="item">item3-3</li>
  11.                     <li class="item">item3-4</li>
  12.                     <li class="item">item3-5</li>
  13.                 </ul>
  14.             </li>
  15.             <li class="item">item4</li>
  16.             <li class="item">item5</li>
  17.             <li class="item">item6</li>
  18.         </ul>
  19.     </ul>
  20.     <style>
  21.         .list   .item {
  22.             border: 1px solid #000;
  23.         }
  25.     </style>
  26. </body>
  27. </html>

web页面

3.兄弟+

程序:

  1. <li class="item four">item4</li>
  2.             <li class="item">item5</li>
  3.             <li class="item">item6</li>
  4.         </ul>
  5.     </ul>
  6.     <style>
  7.         .list > .item.four +.item{
  8.             background-color: blueviolet ;
  9.         }
  11.     </style>
  12. </body>
  13. </html>

或

  1. </li>
  2.             <li class="item four">item4</li>
  3.             <li class="item">item5</li>
  4.             <li class="item">item6</li>
  5.         </ul>
  6.     </ul>
  7.     <style>
  8.         .list > .item.four + *{
  9.             background-color: blueviolet ;
  10.         }
  12.     </style>
  13. </body>
  14. </html>

web页面

4同级的所有~

  1. <body>
  2.     <ul class="list">
  3.         <ul class="list">
  4.             <li class="item">item1</li>
  5.             <li class="item">item2</li>
  6.             <li class="item three">item3</li>
  7.             <li class="item ">item4</li>
  8.             <li class="item">item5</li>
  9.             <li class="item">item6</li>
  10.         </ul>
  11.     </ul>
  12.     <style>
  13.         .list > .item.three ~ *{
  14.             background-color: blueviolet ;
  15.         }
  17.     </style>
  18. </body>
  19. </html>

程序:

【感谢龙石为本站提供数据采集系统 http://www.longshidata.com/pages/government.html 】
更多阅读