webstrom编辑器前端快捷键技巧

我们可以常用 > + ^ * () 这五个符号来简化复杂代码的编写

例如 :
div>ul>li*3
效果如下:

image.png

div+div+p


image.png

div>div^p


image.png

(header>div>ul>li*2)+footer


image.png

我们也经常用 # 以及 . 对标签进行样式的设定
div#container.contain


image.png

div#container.contain[data-value]


image.png

ul>li.item$*5


image.png

a{Click me}


image.png

p{Click me}


image.png

生成无意义字符串,进行排版
lorem10


image.png

lorem100


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Child: >nav>ul>li Sibling: +div+p+bq Clim...
    Michael_涵阅读 419评论 0 1
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,169评论 2 19
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 2018年3月7日、星期三、睛 晚上回来的时候,子墨气呼呼的说:今天在学校可让一年级七班的小男孩气死我了。怎么回事...
    刘子墨妈妈阅读 243评论 0 1
  • 早就想发一点关于教育或社会的长篇牢骚了!女儿还在腹中,就听实习单位的师姐抱怨,每晚要陪孩子写作业,家默,签字,有多...
    1168c85f58f6阅读 208评论 0 0