PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 演示上下文选择的器的四种使用场景

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

飞天001
飞天001 原创
2023年03月18日 19:54:16 222浏览

通过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>

1.父子:>(仅限父子关系时使用)

  1. /*父子 > */
  2. .list>.item{
  3. border:1px solid blue;
  4. }

执行效果如下:

2.后代:空格(后级所有的元素,包括子集,孙子,重孙…)

  1. /* 后代 空格 */
  2. .list .item{
  3. border:1px solid blue;
  4. }

执行效果如下:

3.兄弟:+(相邻的下一个元素,紧跟且只有一个)

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

执行效果如下:

4.同级:~(与当前元素同级的后面全部元素)

  1. /* 4. 所有后面的元素 */
  2. .list > .item.three ~ *{
  3. background-color: blueviolet;
  4. }

执行效果如下:

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议