登录  /  注册
博主信息
博文 77
粉丝 0
评论 0
访问量 76340
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
基本、上下文、伪类选择器的演示;伪类选择器下拉菜单
Jet的博客
原创
457人浏览过

一、基本选择器

  1. <!--
  2. 基本选择器:
  3. 1、标签选择器:
  4. 2、属性选择器:
  5. -->
  6. <style type="text/css">
  7. /*1、标签选择器:*/
  8. h2 {color:yellow;}
  9. /*2、属性选择器:*/
  10. h2.city {color:red;}
  11. </style>
  12. <h2>hello world</h2>
  13. <h2 class="city">hello GZ</h2>

二、上下文选择器

  1. <!--
  2. 上下文选择器:
  3. 1、父子 >
  4. 2、后代 空格 >
  5. 3、兄弟 +
  6. 4、同级 ~
  7. -->
  8. <ul class="list">
  9. <li class="item">item1</li>
  10. <li class="item">item2</li>
  11. <li class="item">item3</li>
  12. <ul>
  13. <li class="item">item</li>
  14. <li class="item">item</li>
  15. <li class="item">item</li>
  16. </ul>
  17. <li class="item start">item4</li>
  18. <li class="item">item5</li>
  19. <li class="item">item6</li>
  20. <li class="item">item7</li>
  21. </ul>
  22. <style type="text/css">
  23. /* 父子 */
  24. .list > .item{ border: thin solid; width:100px; }
  25. /* 后代 */
  26. .list .item{ border:thin solid; width:200px}
  27. /* 兄弟:星号可以匹配任何标签 */
  28. /*.list > .item.start + * { background-color: yellow;}*/
  29. /* 同级 */
  30. .list > .item.start ~ *{ background-color: red;}
  31. </style>

三、伪类选择器

  1. <!--
  2. 伪类选择器:nth-child()
  3. -->
  4. <ul class="list">
  5. <li>item1</li>
  6. <li>item2</li>
  7. <li>item3</li>
  8. <li>item4</li>
  9. <li>item5</li>
  10. <li>item6</li>
  11. <li>item7</li>
  12. <li>item8</li>
  13. <li>item9</li>
  14. <li>item10</li>
  15. </ul>
  16. <style type="text/css">
  17. /* 选择第一个 */
  18. /* :nth-child(0n + 1) === nth-child(1) */
  19. .list > :nth-child(1){ background-color: red;}
  20. /* 偶数 */
  21. /* :nth-child(2n) === :nth-child(even) */
  22. .list > :nth-child(even){ background-color:yellow; }
  23. /* 奇数 */
  24. /* :nth-child(2n + 1) === :nth-child(odd) */
  25. .list > :nth-child(odd){ background-color:navajowhite;}
  26. /* 倒数第3个 */
  27. /* :nth-last-child(-n + 3) */
  28. .list > :nth-last-child(-n +3 ){ background-color: yellow; }
  29. </style>

四、小实操:伪类选择器下拉菜单

  1. <div class="box">
  2. <label for="menu">直播课程</label>
  3. <input type="checkbox" name="xxxx" id="menu" />
  4. <!-- 下拉菜单 -->
  5. <ul>
  6. <li><a href="">前端开发</a></li>
  7. <li><a href="">后端开发</a></li>
  8. <li><a href="">全栈开发</a></li>
  9. </ul>
  10. </div>
  11. <style type="text/css">
  12. /* 1. 初始化 */
  13. /* (1)隐藏复选框 */
  14. #menu { display: none; }
  15. /* (2)隐藏下拉菜单 */
  16. #menu + ul { display: none; }
  17. /* 2. 显示或隐藏下拉菜单 */
  18. /* 更新复选框的状态: 选中或未选中 */
  19. #menu:checked + ul { display: block; }
  20. </style>

要点:#menu:checked + ul { display: block; },#menu选中(checked)就显示ul菜单,没选中就隐藏

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学