在編寫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、例子：[email protected]*5;

十一、類名自增4（設置起始值）：“[email protected]”

　　1、書寫格式：元素.類名[email protected]起始值*個數；

　　2、例子：[email protected]*5;

十二、類名、id名組合快捷

　　1、書寫格式：元素.類名#id名；

　　2、例子：p.box#main;

十三、屬性快捷鍵

　　1、書寫格式：元素名稱[屬性名=”屬性值”]；

　　2、例子：input[title=”hello”];

十四、添加元素內容：“{}”

　　1、書寫格式：元素名稱{元素內容}

　　2、例子：div{你好}

CSS入門2—元素快捷鍵