emmet經常使用語法

時間 2021-02-19

標籤 css html 算法 ide spa code orm htm get 欄目 CSS 简体版

原文原文鏈接

- 什麼是emmet語法css

使用相似於 CSS 選擇器的語法來描述生成的樹和元素屬性中的元素位置（快速構建html結構的快捷語法）html

- 嵌套運算法算法

1. 子代操做符：>ide

例：div>div>p 表示div下有個子代div，子代div下有個p標籤 spa

2. 兄弟操做符：+code

例：div>div+p 表示div下有子代div和p標籤，子代div和p標籤屬於同級orm

3. 返回上級操做符：^htm

例：div>div+p^div 表示一個div下有子代div和p標籤和一個div標籤，最後一個div與第一個div是同級的ip

4. 乘法操做符：*get

例：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>li.item-$@3*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>li.item-$@3*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>