在编写Css代码的过程中，使用元素快捷键可以很大的提高开发的效率，以下是webstorm编辑器中的elemt快捷方式：
一、子集关系：“>”
1、书写格式：父级元素>子级元素；
2、例子：div>p;
二、元素自增：“*”
1、书写格式：元素*元素个数；
2、例子：div>p;
三、兄弟关系：“+”
1、书写格式：元素+元素个数；
2、例子：div+p;
四、创建父级元素：“^”
1、书写格式：子级元素^父级元素；
2、例子：p^div;
五、分组：“()”
1、书写格式：(父级元素>子级元素)*4；
2、例子：p^div;
六、类名快捷：“.”
1、书写格式：元素.类名；
2、例子：p.box;
七、类名快捷：“#”
1、书写格式：元素#类名；
2、例子：p#box;
八、类名自增1（顺序，增加一位）：“$”
1、书写格式：元素.类名$*个数；
2、例子：p.box$*5;
九、类名自增2（顺序，增加两位）：“$$”
1、书写格式：元素.类名$$*个数；
2、例子：p.box$$*5;
十、类名自增3（倒序）：“@-”
1、书写格式：元素.类名@-*个数；
2、例子：p.box@-*5;
十一、类名自增4（设置起始值）：“$@”
1、书写格式：元素.类名$@起始值*个数；
2、例子：p.box@3*5;
十二、类名、id名组合快捷
1、书写格式：元素.类名#id名；
2、例子：p.box#main;
十三、属性快捷键
1、书写格式：元素名称[属性名=”属性值”]；
2、例子：input[title=”hello”];
十四、添加元素内容：“{}”
1、书写格式：元素名称{元素内容}
2、例子：div{你好}