emmet常用语法

程序员文章站 2024-03-25 10:45:22

...

- 什么是emmet语法

使用类似于 CSS 选择器的语法来描述生成的树和元素属性中的元素位置（快速构建html结构的快捷语法）

- 嵌套运算法

1. 子代操作符：>

例：div>div>p 表示div下有个子代div，子代div下有个p标签

2. 兄弟操作符：+

例：div>div+p 表示div下有子代div和p标签，子代div和p标签属于同级

3. 返回上级操作符：^

例：div>div+p^div 表示一个div下有子代div和p标签和一个div标签，最后一个div与第一个div是同级的

4. 乘法操作符：*

例：ul>li*2 表示ul标签下有两个li子标签

5. 分组操作符：()

例：div>(header>ul>li*2>a)+footer>p 表示div下有header和footer两个同级标签，即包含两组

- 属性操作符

1. id和class分别使用“#”和“.”表示，若是class属性不唯一时，可并列书写

例：div#header>p.news*2 表示div有id为header，p标签有class为new

div#header>p.news.new-tip 表示表示div有id为header，p标签有class为new和new-tip

2. 定制属性：[]

例：a[target='' title='hello world']*2

3. 数值计算运算符：$（按一定的数字进行排列）

例：div>ul>li.item-$*3 表示li的class有三个，分别为：item-1，item-2，item-3

div>ul>[email protected]*3 表示li的class属性的数字从指定数字开始

4. 本文操作符：{}

例：div#news>p{Hello,World!} 表示p标签的内容是Hello,World

- 样例

<body>
    <!-- div>div>p的结果 -->
    <div>
        <div>
            <p></p>
        </div>
    </div>
    <!-- div>div+p的结果 -->
    <div>
        <div></div>
        <p></p>
    </div>
    <!-- div>div+p^div的结果 -->
    <div>
        <div></div>
        <p></p>
    </div>
    <div></div>
    <!-- ul>li*2的结果 -->
    <ul>
        <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>
    <!-- div#header>p.news*2的结果 -->
    <div id="header">
        <p class="news"></p>
        <p class="news"></p>
    </div>
    <!-- div#header>p.news.new-tip的结果 -->
    <div id="header">
        <p class="news new-tip"></p>
    </div>
    <!-- a[target='' title='hello world']*2的结果 -->
    <a href="" target="" title="hello world"></a>
    <a href="" target="" title="hello world"></a>
    <!-- .a[target='' title='hello world']*2的结果 -->
    <div class="a" target="" title="hello world"></div>
    <div class="a" target="" title="hello world"></div>
    <!-- div>ul>li.item-$*3的结果 -->
    <div>
        <ul>
            <li class="item-1"></li>
            <li class="item-2"></li>
            <li class="item-3"></li>
        </ul>
    </div>
    <!-- div>ul>[email protected]*3的结果 -->
    <div>
        <ul>
            <li class="item-3"></li>
            <li class="item-4"></li>
            <li class="item-5"></li>
        </ul>
    </div>
    <!-- div#news>p{Hello,World!}的结果 -->
    <div id="news">
        <p>Hello,World!</p>
    </div>
    <!-- #page>div.logo+ul#nav>li*5>a{Item $}的结果 -->
    <div id="page">
        <div class="logo"></div>
        <ul id="nav">
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="">Item 5</a></li>
        </ul>
    </div>
    <!-- div+div>p>span+em^^bq的结果 -->
    <div></div>
    <div>
        <p><span></span><em></em></p>
    </div>
    <blockquote></blockquote>
    <!-- h$[title=item$]{header $}*3的结果 -->
    <h1 title="item1">header 1</h1>
    <h2 title="item2">header 2</h2>
    <h3 title="item3">header 3</h3>
    <!-- ul>li.item$$$*3的结果 -->
    <ul>
        <li class="item001"></li>
        <li class="item002"></li>
        <li class="item003"></li>
    </ul>
    <!-- form#search.wide的结果 -->
    <form action="" id="search" class="wide"></form>
    <!-- p.class1.class2的结果 -->
    <p class="class1 class2"></p>
    <!-- p>{click}+a{here}+{to continue}的结果 -->
    <p>
        click
        <a href="">here</a>
        to continue
    </p>
    <!-- table>.row>.col的结果 -->
    <table>
        <tr class="row">
            <td class="col"></td>
        </tr>
    </table>
    <!-- a:link的结果 -->
    <a href="http://"></a>
    <!-- a:mail的结果 -->
    <a href="mailto:"></a>
    <!-- link:print的结果 -->
    <link rel="stylesheet" href="print.css" media="print">
    <!-- inp[type=datetime]的结果 -->
    <input type="datetime" name="" id="">
</body>

emmet常用语法