html标签速写

HTML标签速写相关规则

符号	功能	示例
>	子级元素	div>ul>li
+	并列元素	div+div>span
^	父级兄弟元素	div>ul^div>span
^^	多级上层兄弟元素	ul>li>span^^div
*	重复当前元素	ul>li*3
()	分组，操作多元素	div>(p>span)*3
#	添加id属性	div#main
.	添加class属性	div.content
[]	添加多种属性	div[class=content title=head]
$	顺序排列占位符默认1	p.item$*3
$$	顺序排列占位符默认01	p.item$$*3
@	顺序排列从某数开始	p.item$@3*3
@-	逆序排列到某数结束	p.item$@-3*3
{}	元素文本内容	div#main>div.content>p.item{text1}+p.item{text2}

1. div>ul>li

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

2. div+div>span

<div></div>
<div>
    <span></span>
</div>

3. div>ul^div>span

<div>
    <ul></ul>
</div>
<div>
	<span></span>
</div>

4. ul>li>span^^div

<ul>
    <li>
       <span></span>
    </li>
</ul>
<div></div>

5. ul>li*3

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

6. div>(p>span)*3

<div>
    <p><span></span></p>
    <p><span></span></p>
    <p><span></span></p>
</div>

7. div#main

<div id="main"></div>

8. div.content

<div class="content"></div>

9. div[class=content title=head]

<div class="content" title="head"></div>

10. p.item$*3

<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>

11. p.item$$*3

<p class="item01"></p>
<p class="item02"></p>
<p class="item03"></p>

12. p.item$@3*3

<p class="item3"></p>
<p class="item4"></p>
<p class="item5"></p>

13. p.item$@-3*3

<p class="item5"></p>
<p class="item4"></p>
<p class="item3"></p>

14. div#main>div.content>p.item{text1}+p.item{text2}

<div id="main"></div>
  <div class="content">
    <p class="item">text1</p>
    <p class="item">text2</p>
  </div>
</div>

---

点赞 评论 收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏