目录

如何提高写前端的效率干货,快进

如何提高写前端的效率?干货,快进!

我们在写前端的时候,面对重复代码的时候,很多时候就会复制粘贴,实际上可以通过技巧来提高写前端的效率。接下来将介绍几个常用的提高效率的技巧

目录

注释

输入以下代码

Ctrl+/

另外,取消注释也是 Ctrl+/

乘法

*

输入以下代码

(div>ul>li)*5

https://i-blog.csdnimg.cn/blog_migrate/9479dafcf41a432bdd931cea0225be13.png#pic_center

后代

>

输入以下代码

nav>ul>li

https://i-blog.csdnimg.cn/blog_migrate/afc23e35aad9fc44c96c4f2756b838d8.png#pic_center

兄弟

+

输入以下代码

div+p+bq

https://i-blog.csdnimg.cn/blog_migrate/7ada8ab8b31a616629212ec0e470fa3c.png#pic_center

上级

^

输入以下代码

div+div>p>span+em^bq

https://i-blog.csdnimg.cn/blog_migrate/ffb432c340cb116b875336ade51e740a.png#pic_center

输入以下代码

div+div>p>span+em^^bq

https://i-blog.csdnimg.cn/blog_migrate/1eac704990361f8ce002f31d88a671c5.png#pic_center

分组

()

输入以下代码

(div>dl>(dt+dd)*3)+footer>p

https://i-blog.csdnimg.cn/blog_migrate/f208c8d28c6817f0d9bf284ef096ab6a.png#pic_center

自增

$

输入以下代码

ul>li.item$*5

https://i-blog.csdnimg.cn/blog_migrate/a971276058bad8eab3e346cb2e30b0b5.png#pic_center

倒序的

 ul>li.item$@-*5

https://i-blog.csdnimg.cn/blog_migrate/6f3591cc001d563f9ce0a63c47ed2df0.png#pic_center

编号为3位数字

ul>li.item$$$*10

https://i-blog.csdnimg.cn/blog_migrate/1973ac57de99c097b9cb089cd2be3ede.png#pic_center

自增从5开始,输出10条

ul>li.item$@5*10

https://i-blog.csdnimg.cn/blog_migrate/c9f1645f0767c7dc812088b15c451ec6.png#pic_center

ID和类

#和.

#header

https://i-blog.csdnimg.cn/blog_migrate/238e8ae63496c3cbf910ce3a480c2cf3.png#pic_center

.title

https://i-blog.csdnimg.cn/blog_migrate/e6c073079542c7354c48fa791e3ae3ab.png#pic_center

form#search.wide

https://i-blog.csdnimg.cn/blog_migrate/7ccac1d6faf71b845c6750c609f60535.png#pic_center

自定义属性

[]

p[title="Hello world"]

https://i-blog.csdnimg.cn/blog_migrate/dbd04724cceb991a4f0a341715297e46.png#pic_center

多个属性的情况

 td[rowspan=2 colspan=3 title]

https://i-blog.csdnimg.cn/blog_migrate/c05790963bf741e4fb5d3740b630469a.png#pic_center

文本

{}

a{Hello world}

https://i-blog.csdnimg.cn/blog_migrate/e6669d8f808bcecde166f6377517bb22.png#pic_center

p{段落内容}

再按 Tab键(下同)

例如:

https://i-blog.csdnimg.cn/blog_migrate/4f152d9ee3df5fb21d378cd4c0a74865.png#pic_center

隐式标签

.class

https://i-blog.csdnimg.cn/blog_migrate/6f07545a790901e48bed26d38e90ddea.png#pic_center

em>.class

https://i-blog.csdnimg.cn/blog_migrate/fcccf369cd3f0c548fadf89cc588fe9a.png#pic_center

ul>.class

https://i-blog.csdnimg.cn/blog_migrate/b5343c039633f7d542dcd412b3fd9dd6.png#pic_center

table>.row>.col

https://i-blog.csdnimg.cn/blog_migrate/5162cd2b1b7ce4ff533e58a2aff89204.png#pic_center

还有很多,所有未知的缩写都会转换成标签————》详细戳

宝藏女孩 欢迎您的关注!

欢迎关注微信公众号:宝藏女孩的成长日记

如有转载,请注明出处(如不注明,盗者必究)