• CSS选择器练习小游戏


    请结合CSS选择器练习小游戏进行阅读(网页的动态效果是没有办法通过静态图片展示的)
    网址:请点击
    有些题有多种答案,本文就不一一列出了

    1. 第一题
      在这里插入图片描述
      答案:plate
    2. 第二题
      在这里插入图片描述
      答案:bento
    3. 第三题

      答案:#fancy
    4. 第四题
      在这里插入图片描述
      答案:plate apple或者plate>apple
    5. 第五题
      在这里插入图片描述
      答案:#fancy pickle
    6. 第六题
      在这里插入图片描述
      答案:.small或者apple.small
    7. 第七题
      在这里插入图片描述
      答案:orange.small或者plate>orange.small,bento>orange.small(第二种就有点小丑了)
    8. 第八题
      在这里插入图片描述
      答案:bento orange.small
    9. 第九题
      在这里插入图片描述
      答案:plate,bento
    10. 第十题
      在这里插入图片描述
      答案:*
    11. 第十一题
      在这里插入图片描述
      答案:plate *
    12. 第十二题
      在这里插入图片描述
      答案:plate+apple
      有时真的得佩服别人,我舍长在没了解过选择器的语法格式的情况下,就单看这一题,一眼就看出这两个apple都在盘子后面。有时候真不是逃避,是真比不过
    13. 第十三题
      在这里插入图片描述
      答案:bento~pickle
      我一开始想错了这个答案的含义,正确的是:在bento后面所有的pickle
    14. 第十四题
      在这里插入图片描述
      答案:plate>apple
    15. 第十五题
      在这里插入图片描述
      答案:plate :first-child(冒号前面一定要有一个空格,不然不行)
    16. 第十六题
      在这里插入图片描述
      答案::only-child
    17. 第十七题
      在这里插入图片描述
      答案:plate apple:last-child,pickle
    18. 第十八题
      在这里插入图片描述
      答案::nth-child(3)
    19. 第十九题
      在这里插入图片描述
      答案::nth-last-child(4)或者bento:nth-child(2)或者bento:first-of-type
      (除了第一个,后边两个冒号前不能加空格,我也不是太清楚啥时候能在冒号前加,啥时候不能加)
    20. 第二十题
      在这里插入图片描述
      答案:apple:first-of-type(同样冒号前加不了一点空格)
    21. 第二十一题
      在这里插入图片描述
      答案::nth-of-type(even)
      (even:复数,odd:奇数。当输入数字时,和:nth-child()的用法一样)
    22. 第二十二题
      在这里插入图片描述
      答案::nth-of-type(2n+3)或者:nth-child(2n+3)
    23. 第二十三题
      在这里插入图片描述
      答案:apple:only-of-type(冒号前不能加空格)
    24. 第二十四题
      在这里插入图片描述
      答案:orange:last-of-type,apple:last-of-type
    25. 第二十五题
      在这里插入图片描述
      答案:bento:empty(冒号前后都不能加空格,上面的情况应该也同样)
    26. 第二十六题
      在这里插入图片描述
      答案:apple:not(.small)

    根据版本的不同,我这里已经游戏结束了,那么恭喜你
    在这里插入图片描述

  • 相关阅读:
    Unittest-生成HTML测试报告
    LabVIEW流量控制系统
    【k8s命令】查看node、pod使用的资源
    【算法】希尔排序
    Linux下基于ffmpeg音视频解码
    使用Perl脚本编写爬虫程序的一些技术问题解答
    Python怎么打印彩色字符串
    JVM的Class对象的存储位置和作用
    新能源汽车如何融合互联网,结合消费者习惯打造全新的营销策略?
    RabbitMQ(七)延迟队列
  • 原文地址:https://blog.csdn.net/m0_64799907/article/details/132976589