CSS入门2—元素快捷键

在编写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{你好}