Zen coding || Emmet

'#' 创建一个id特性
'.' 创建一个类特性
'[]' 创建一个自定义特性
'>' 创建一个子元素
'+' 创建一个兄弟元素
'^' 提升元素层次
'*' 相当于乘号,会创建n次相同的东西。
'$' 代替一个自增的数字。
'$$' 用于有填充位的数字,比如00,01。
'{}' 创建元素的文本。

示例

//ul#container>li.item.highlight[data="" role=""]{text$}*5^ol>li*2
//效果
<ul id="container">
  <li class="item highlight" data="" role="">text1</li>
  <li class="item highlight" data="" role="">text2</li>
  <li class="item highlight" data="" role="">text3</li>
  <li class="item highlight" data="" role="">text4</li>
  <li class="item highlight" data="" role="">text5</li>
</ul>
<ol>
  <li></li>
  <li></li>
</ol>

m0
p0
w100p
h100p
w100
h100
fl
fr
bgc
l300
r300
mb300
df
jcsb
dt

      width: 100px;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      width: 100px;
      height: 100px;
      float: left;
      float: right;
      background-color: #fff;
      left: 300px;
      right: 300px;
      margin-bottom: 300px;
      display: flex;
      justify-content: space-between;
      display: table;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容