了解emmet语法持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情 emm

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

emmet语法

emmet是一个能大幅度提高前端开发效率的一个工具。

1. >(子代)和 +(兄弟)

①div>ul>li

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

②div+p+ul>li

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

2. *(多个) 和 ^(上一级)

①div>ul>li*3

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

②div>p+span>h1>^span

 <div>
   <p></p>
   <span><h1></h1></span>
   <span></span>
 </div>

3. () 分组

4.属性(id属性、class属性、普通属性) {}(内容)

①div#head+div#main>.con>a[href]

 <divid="head"></div>
 <divid="main">
   <divclass="con"><ahref=""></a></div>
 </div>

②ul>.list*3

 <ul>
   <liclass="list"></li>
   <liclass="list"></li>
   <liclass="list"></li>
 </ul>

5.$数字

ul>li{我是li$$$}*3

 <ul>
   <li>我是li001</li>
   <li>我是li002</li>
   <li>我是li003</li>
 </ul>

6.隐式标签

.box+.home

 <div>
   <divclass="box"></div>
   <divclass="home"></div>
 </div>

7.CSS Emmet

①w100

     width:100px;

②w100+h100+m50+p50

     width:100px;
     height:100px;
     margin:50px;
     padding:50px;

③m10-10-10-10

     margin:10px10px10px10px;

④dib

     display:inline-block;

⑤bd1#cs

     border:1px #ccc solid;

三、结构伪类

1. :nth-chlid()

:nth-child(1)

是父元素中的第1个子元素

:nth-child(2n)

n代表任意正整数和0

是父元素中的第偶数个子元素（第2、4、6、8.….个)

跟:nth-child(even)同义

:nth-child(2n + 1)

n代表任意正整数和0

是父元素中的第奇数个子元素(第1、3、5、7..….个)

跟:nth-child(odd)局义

2. :nth-last-child()

:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数

:nth-last-child(1);代表倒数第一个子元素

:nth-last-child(-n + 2)，代表最后2个子元素

3. :nth-of-type()

:nth-of-type()用法跟:nth-child()类似

不同点是:nth-of-type()计数时只计算同种类型的元素

<style>
  /* 选择box中的div元素，并且是第三个元素 */
  .box > div:nth-child(3){
    color: red;
  }
  /* 选择box中的第三个div元素（排除所有干扰项） */
  .box > div:nth-of-type(3){
    color: red;
  }
</style>
</head>
<body>

  <div class="box">
    <div>我是div元素1</div>
    <p>我是p元素</p>
    <span>我是span1</span>
    <span>我是span2</span>
    <span>我是span3</span>
    <div>我是div元素2</div>
    <div>我是div元素3</div>
    <div>我是div元素4</div>
    <div>我是div元素5</div>
    <div>我是div元素6</div>
    <div>我是div元素7</div>
    <div>我是div元素8</div>
  </div>

</body>

4. :nth-last-of-type()

:nth-last-of-type()用法跟:nth-of-type()类似

不同点是:nth-last-of-type)从最后一个这种类型的子元素开始往前计数

5.其他结构伪类（了解）

:first-child，等同于:nth-child(1)

:last-child，等同于:nth-last-child(1)

:first-of-type，等同于:nth-of-type(1)

:last-of-type，等同于:nth-last-of-type(1)

:only-child，是父元素中唯一的子元素

:only-of-type，是父元素中唯一的这种类型的子元素

:root，根元素，就是HTML元素

:empty代表里面完全空白的元素

否定伪类 :not()