Emmet使用教程

选择器

>子类选择器

div>ul>li

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

+兄弟选择器

div+p+bq

<div>div>
<p>p>
<blockquote>blockquote>

^提升选择器

div+div>p>span+em 

<div>div>
<div>
    <p><span>span><em>em>p>
div>

输入N重,便可以提升N重

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

<div>div>
<div>
    <p><span>span><em>em>p>
div>
<blockquote>blockquote>

运算符

*运算符

ul>li*5

<ul>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
ul>

()运算符,可代替^选择器

div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href="">a>li>
            <li><a href="">a>li>
        ul>
    header>
    <footer>
        <p>p>
    footer>
div>

{}文本运算符

a{Click me}

<a href="">Click mea>

属性操作符

CSS属性:ID+Class选择器

div#header+div.page+div#footer.class1.class2.class3

<div id="header">div>
<div class="page">div>
<div id="footer" class="class1 class2 class3">div>

自定义属性

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3">td>

元素计数

ul>li.item$*5

<ul>
    <li class="item1">li>
    <li class="item2">li>
    <li class="item3">li>
    <li class="item4">li>
    <li class="item5">li>
ul>

多重计数

ul>li.item$$$*5

<ul>
    <li class="item001">li>
    <li class="item002">li>
    <li class="item003">li>
    <li class="item004">li>
    <li class="item005">li>
ul>

起始位置计数

<--倒数计数-->
ul>li.item$@-*5

<ul>
    <li class="item5">li>
    <li class="item4">li>
    <li class="item3">li>
    <li class="item2">li>
    <li class="item1">li>
ul>
    
<--从3开始计数-->
ul>li.item$@3*5

<ul>
    <li class="item3">li>
    <li class="item4">li>
    <li class="item5">li>
    <li class="item6">li>
    <li class="item7">li>
ul>
    
<--从3开始截止计数-->
ul>li.item$@-3*5

<ul>
    <li class="item7">li>
    <li class="item6">li>
    <li class="item5">li>
    <li class="item4">li>
    <li class="item3">li>
ul>