一、常用操作

使用“>”生成子元素:嵌套操作

使用“+”生成兄弟元素

使用“^”生成父元素

使用“*”生成多个相同元素:div>ul>li*5

使用“()”将元素分组:div>(header>ul>li*2)+footer>p

id与class:元素与 id 属性值之间用 “#” 分隔,与 class 属性值之间用 “.” 分隔

用“$”符号实现1到n的自动编号(“*”实现多个元素):li.item$*3
 

二、常用缩写

style : <style></style>

script:src:<script src=""></script>

img :<img src="" alt="" />

form :<form action=""></form>

form:post:<form action="" method="post"></form>

inp :<input type="text" name="" id="" />

select option textarea

btn:b :<button type="button"></button>

btn:s :<button type="submit"></button>

btn:r :<button type="reset"></button>

乱点位符Lorem100:生成100个字节的乱字

按ALt+点击生成大光标

按Clat+点击多处光标

 

三、特殊

lorem/*添加占位字*/

ul>li*5>p>lorem100/*在ul下添加5个li然后再添加一个p标签并用50个字符填充*/

> /*下级,示例:div>ul>li */

+ /*同级,示例:div+p+bq */

^ /*上级,示例:div+div>p>span+em^bq */

* /*生成几个元素,示例: ul>li*5 */

# /*在html代表ID,示例:div#header*/

. /*生成样式类,示例: div.page */

[] /*给元素添加属性,示例:a[title]*/

{} /*给元素添加文本,示例: a{Click me} 然后生成<a href="">Click me</a>*/