前端主流IDE快捷语法

本文主要介绍前端的一些主流IDE常用语法，示例IDE为webstorm2017.3

1.类名：div.nav +Tab
tips：div是标签，试用所有常用的标签如a、p、input等等，而 “.” 后面跟随的就是我们的class类名，如需多个类名可用 .+类名 拼接多个，如：div.+类名.+类名 。若需设置id，用#拼接即可，如：div#+id名。

<div class="nav"></div>
<div class="nav color"></div>
<div id="nav"></div>

2.父子容器：div>ul>li+Tab
tips: >是拼接父子容器的，可以逐级递增。

<div>
 <ul>
    <li></li>
  </ul>
</div>

3.多个标签元素：div>ul>li*5+Tab
tips： *+数字数值的多少表示子集的个数，适用乘法。

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

4.html模板：！+Tab

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

5.同级兄弟元素：nav+div+p+Tab
tips:同级兄弟元素用+号拼接

<nav></nav>
<p></p>
<div></div>

6.复合元素分组：div>(nav>ul+li*5>a)+div+fooder>span+Tab
tips:符合（）和加乘法的优先级判断

<div>
  <nav>
    <ul></ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </nav>
  <div></div>
  <fooder><span></span></fooder>
</div>

7.类名自增：ul>ol.class$*3+Tab

<ul>
 <ol class="class1"></ol>
 <ol class="class2"></ol>
 <ol class="class3"></ol>
</ul>

秒客网

前端主流IDE快捷语法

相关文章