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

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

通过3月14号的学习了解了选择器的四种使用场景,现介绍如下.

上下文选择器的使用场景

html代码:

  1. <ul class="list">
  2.     <li class="item">item1</li>
  3.     <li class="item">item2</li>
  4.     <li class="item three">item3</li>
  5.       <ul>
  6.         <li class="item">item1</li>
  7.         <li class="item">item2</li>
  8.         <li class="item">item3</li>
  9.       </ul>
  10.     <li class="item four">item4</li>
  11.     <li class="item">item5</li>
  12.     <li class="item">item6</li>
  13.     <li class="item">item7</li>
  14.     <li class="item">item8</li>
  15.    </ul>
>(仅限父子关系时使用)" class="reference-link">1.父子:>(仅限父子关系时使用)
  1.  /*父子  >  */
  2. .list>.item{
  3.     border:1px solid blue;
  4.     }

执行效果如下:

空格(后级所有的元素,包括子集,孙子,重孙…)" class="reference-link">2.后代:空格(后级所有的元素,包括子集,孙子,重孙…)
  1.    /*  后代 空格 */
  2.     .list .item{
  3.     border:1px solid blue;
  4.    }

执行效果如下:

+(相邻的下一个元素,紧跟且只有一个)" class="reference-link">3.兄弟:+(相邻的下一个元素,紧跟且只有一个)
  1.  /* 下一个相邻的元素,可以用+ 下一个class */
  2.    /* .list > .item.four + .item{
  3.     background-color: brown;
  4.    } */
  5.    /* 下一个相邻的元素,可以用+*(这样权重小一些) * 是通配符,表示任意元素 */
  6.    .list > .item.four + *{
  7.     background-color: brown;
  8.    }

执行效果如下:

~(与当前元素同级的后面全部元素)" class="reference-link">4.同级:~(与当前元素同级的后面全部元素)
  1.  /* 4. 所有后面的元素 */
  2.     .list > .item.three ~ *{
  3.         background-color: blueviolet;
  4.     }

执行效果如下:

通过上面的实操,基本掌握上下文选择器的四种使用场景.

【感谢龙石为本站提供数据底座技术支撑http://www.longshidata.com/pages/government.html】
更多阅读