博客列表 >上下文选择器及状态伪类实现一个下拉菜单功能

上下文选择器及状态伪类实现一个下拉菜单功能

P粉753609736
P粉753609736原创
2023年02月04日 15:48:40419浏览

一、上下文选择器

根据元素位置与层级匹配元素

1.父子 >大于号
2.后代 空格
3.兄弟 +加号
4.同级 ~波浪线

实战演示

1.父子>

  1. <ul class="list">
  2. <li class="item">item1</li>
  3. <li class="item">item2</li>
  4. <li class="item">item3</li>
  5. </ul>
  1. .list > .item {
  2. border: thin solid;
  3. }

2.后代空格

  1. <ul>
  2. <li class="item">item1</li>
  3. <li class="item">item2</li>
  4. <li class="item">item3
  5. <ul>
  6. <li class="item">item1</li>
  7. <li class="item">item2</li>
  8. <li class="item">item3</li>
  9. </ul>
  10. </li>
  11. </ul>
  1. .list .item {
  2. border: thin solid;
  3. }

3.兄弟 +加号

  1. <ul class="list">
  2. <li class="item">item1</li>
  3. <li class="item start">item2</li>
  4. <li class="item">item3</li>
  5. </ul>
  1. .list > .item.start + * {
  2. background-color: bule;
  3. }

4.同级 ~波浪线

  1. <ul class="list">
  2. <li class="item">item1</li>
  3. <li class="item start">item2</li>
  4. <li class="item">item3</li>
  5. </ul>
  1. .list > .item.start ~ * {
  2. background-color: green;
  3. }

二、状态伪类实现一个下拉菜单功能

  1. <div class="box">
  2. <label for="menu">下拉演示</label>
  3. <input type="checkbox" name="xxx" id="menu" />
  4. <ul>
  5. <li><a href="">item1</a></li>
  6. <li><a href="">item2</a></li>
  7. <li><a href="">item3</a></li>
  8. </ul>
  9. </div>
  1. #menu {
  2. display:none;
  3. }
  4. #menu + ul {
  5. display: none;
  6. }
  7. #menu:checked + ul {
  8. display:block;
  9. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议