星光

推荐一个有意思的练习CSS选择器的网站

因为最近比较忙,外加有些事情(这不是重复嘛,喂),所以更新放缓,见谅,废话不多说,直接上网址

http://flukeout.github.io/

最初知道这个还是看到了Cee酱的推荐,进去试了下,根本停不下来,一口气做完了,非常有意思

这个网站最大的好处就是直观交互地展现了CSS不同选择器的作用和使用场景,以及你的写法是否work

如果不work的话,盘子上的东西是不会被拿走,但是你对应选择的部分会发生抖动,这也是我觉得最神的地方

比如学 * 时,我不知道这个符号和直接选择整体有什么区别(根据文字说明有时候不太直观)

就试了下, plate 是整个盘子及盘子上的所以东西都会抖动,而 plate * 是只有盘子之上的东西才会抖动

也就是说, plate = plate(本身) + plate * (子代元素)

如此直观的方式真是让人大呼过瘾,自己在解决问题拿起对应方式时使用各种方法,也是一种乐趣(并非唯一解,拿起来即可)

其实好感度比较高还有一点原因就是自己也不清楚有没有什么办法可以直观地判断选择器书写是否选到了自己想要的东西(有个好友说,可以加css,修改页面看效果,但是感觉不太优雅233,求前端党推荐神器,虽然我一时半会也用不着)

学好并灵活运用CSS选择器意义很大,就算不怎么写前端也可以带来很大帮助,比如写JS脚本(引入JQ后直接用选择器)还有就是Pyquery抓自己感兴趣的内容,等等等等,enjoy it~

 

如无特殊声明,欢迎转载,但是请注明来自星之所在《推荐一个有意思的练习CSS选择器的网站》

评论

  1. 天然傲娇 #1

    还有一个办法就是打开控制台,选到相应的元素,看它的 style 里面有没有自己写的那部分,没有的话就是没选上咯。
    现在觉得 Styles 右边的 Computed 非常好用,能显示最终作用到元素上的 css 样式。

    回复
    2015-05-17
    • Starlight

      Mark!谢谢,Chrome的F12还不会用。。现在只会用火狐的Firebug和自带的一些基本功能,抽空去填坑

      回复
      2015-05-19
      • frantic1048

        曾经试过一段时间 firebug,感觉怎么都不如火狐子自带的̶调̶戏开发者工具,而且火狐子自带的更加酷炫!
        话说 Cr 的工具已经把 tab 做成随便编辑的了,不知道火狐子什么时候支持 _(:з」∠)_

        回复
        2015-05-19
  2. DIYgod #2

    不好选或者嵌套太多的时候直接加个class或者id就好了嘛

    回复
    2015-05-17
    • Starlight

      问题是别人的网站,我要针对这个来进行操作就不能那么理想化了,而且现阶段根本不想写前端代码。。。。

      回复
      2015-05-17
    • Starlight

      顺便感觉写JS如果选择器都玩不溜还是别写了。。。。

      回复
      2015-05-17
  3. Puteulanus #3

    好东西w~收藏收藏

    回复
    2015-05-17
    • Starlight

      有用就好ww

      回复
      2015-05-19
  4. frantic1048 #4

    打到 Level 26 猛然发现右边的字竟然是提示…………

    回复
    2015-05-19
    • Starlight

      菊苣通关不看提示233

      回复
      2015-05-19
      • frantic1048

        都是很基本的选择器……不会写选择器还怎么玩网页了 (。◕‿◕。)

        回复
        2015-05-19
        • Starlight

          对啊,对啊,所以我不会玩网页 (。◕‿◕。)

          回复
          2015-05-19
  5. frantic1048 #5

    这个还缺了几个属性选择器的说

    [=],[~=],[|=],[^=],[$=],[*=]

    给作者提了个 issue _(:з」∠)_

    回复
    2015-05-19
    • Starlight

      赞赞赞,原来还有这么多选择器

      回复
      2015-05-19
  6. IT疯狂女 #6

    CSS好久都没有用过了

    回复
    2015-05-20
  7. eddie32 #7

    好东西 😛 😛

    回复
    2015-06-1
  8. AvalonDragoN龙龙 #8

    收藏了~~好东西!

    回复
    2015-08-7