1014课件作业

Emment常用语法

第一种 内容

<!-- div{我是div标签} -->
<div>我是div标签</div>

第二种 标签属性

<!-- [data-name=admin]{账号名：admin} -->
<div data-name="admin">账号名：admin</div>
<!-- #name.box{测试ID和class} -->
<div id="name" class="box">测试ID和class</div>

第三种 子级

<!-- ul.list>li.item{列表}*4 -->
<ul class="list">
  <li class="item">列表</li>
  <li class="item">列表</li>
  <li class="item">列表</li>
  <li class="item">列表</li>
</ul>

第四种 重复

<!-- .myDiv*4 -->
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>

第五种 兄弟

<!-- .myDiv+p.test -->
<div class="myDiv"></div>
<p class="test"></p>

第六种 父级

<!-- .header>.box{我是头部}^.conter{我是内容}^.footer>ul.list>li.item{我是底部列表}*3 -->
<div class="header">
  <div class="box">我是头部</div>
</div>
<div class="conter">我是内容</div>
<div class="footer">
  <ul class="list">
    <li class="item">我是底部列表</li>
    <li class="item">我是底部列表</li>
    <li class="item">我是底部列表</li>
  </ul>
</div>

第七种 正序，倒序，定位

<!-- li{item-$}*3 -->
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<!-- li{item-$@5}*3 -->
<li>item-5</li>
<li>item-6</li>
<li>item-7</li>
<!-- li{item-$@-5}*3 -->
<li>item-7</li>
<li>item-6</li>
<li>item-5</li>

第八种 组合

<!-- .ul>li*2^(.myDiv>p.test)^(.footer.nav.item*2) -->
<div class="ul">
  <li></li>
  <li></li>
</div>
<div class="myDiv">
  <p class="test"></p>
</div>
<div class="footer nav item"></div>
<div class="footer nav item"></div>