登录  /  注册
博主信息
博文 10
粉丝 0
评论 0
访问量 5222
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
怪异盒模型以及伪类运用以及新增选择器
失忆孤独患者
原创
386人浏览过

知识点: 伪类 分为结构味蕾 和状态伪类
结构伪类为
nth-child
frist-child
last-child
nth-last-child
状态伪类
hover 鼠标悬停
enabled 有效空间
disabled 禁用控件
checked 选中控件
required 必选控件
focus 焦点控件

  1. nth -child(an+b)
  2. a 系数 n 参数 b 偏移量 [0 开始]
  3. 偶数 even 2n) (3n -1) 奇数 odd 2n+1
  4. <style>
  5. .obxli {
  6. background-color: black;
  7. padding: 100px;
  8. margin: 100px;
  9. border: 40px solid rebeccapurple;
  10. width: 700px;
  11. height: 700px;
  12. box-sizing: border-box;
  13. /* 盒模型让 边框+pading=box-sizing
  14. 如果没有怪异盒模型 则是 宽度+pading +border
  15. */
  16. }
  17. .obxli li:nth-child(3) {
  18. /* -n+3 获取正数三个 */
  19. color: blue;
  20. }
  21. .obxli li:first-child {
  22. color: brown;
  23. }
  24. .obxli li:last-child {
  25. color: blueviolet;
  26. }
  27. .obxli li:nth-last-child(2) {
  28. color: aqua;
  29. }
  30. /* .obxli li:nth-last-child(-n+3){}// 获取倒数三个
  31. */
  32. .login :focus {
  33. outline: 1px solid red;
  34. border-bottom: none;
  35. }
  36. .login [type="text"]:required {
  37. background-color: blue;
  38. }
  39. .login [type="checkbox"]:checked {
  40. background-color: yellow;
  41. }
  42. </style>
  43. <ul class="obxli">
  44. <li class="item">item</li>
  45. <li class="item">item</li>
  46. <li class="item">第三个</li>
  47. <li class="item">第四个</li>
  48. <li class="item">item</li>
  49. <li class="item">item</li>
  50. <li class="item">item</li>
  51. <li class="item">item</li>
  52. <li class="item">倒数第二个</li>
  53. <li class="item">最后一个</li>
  54. </ul>
  55. <div>
  56. <form action="" method="post">
  57. <fieldset class="login">
  58. <legend>标题</legend>
  59. <label for="yonghu">用户名</label>
  60. <input type="text" name="youhu" id="youghu" disabled>
  61. <label for="em">邮件</label>
  62. <input type="email" name="youhu" id="em">
  63. <label for="rem" id="dell">电话</label>
  64. <input type="tel" name="youhu">
  65. <div class="requiredon">
  66. <label for="dan">记住我</label>
  67. <input type="checkbox" name="dan" id="dan">
  68. </div>
  69. <button type="submit">提交</button>
  70. </fieldset>
  71. </form>
  72. </div>![](https://img.php.cn/upload/image/678/135/161/1678950201220043.jpg)
批改老师: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+教程免费学