语法:
1、后代：>
缩写：nav>ul>li
< nav>
< ul>
< li></ li >
< /ul >
< /nav>
2、兄弟：+
缩写：div+p+bq
< div></ div >
< p></ p >
< blockquote>< /blockquote >
3、上级：^
缩写：div+div>p>span+em^bq
< div >< /div >
< div >
< p>< span>< /span >< em >< /em >< /p >
< blockquote>< /blockquote >
< /div >
缩写：div+div>p>span+em^^bq
< div>< /div >
< div>
< p>
< span>< /span >
< em>< /em >
< /p >
< /div >
< blockquote>< /blockquote >
4、分组：()
缩写：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>dl>(dt+dd)*3)+footer>p
< div >
< dl>
< dt>< /dt >
< dd>< /dd >
< dt>< /dt >
< dd>< /dd >
< dt>< /dt >
< dd>< /dd >
< /div>
< footer>
< p>< /p >
< /footer >
5、乘法：*
缩写：ul>li*5
< ul>
< li>< /li >
< li>< /li >
< li>< /li >
< li>< /li >
< li>< /li >
< /ul>
6、自增符号：$
缩写：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 >
缩写：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$$$*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>
缩写：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 >
7、ID和类属性
缩写：#header
< div id="header">< /div >
缩写：.title
< div class="title">< /div >
缩写：form#search.wide
< form id="search" class="wide">< /form >
缩写：p.class1.class2.class3
< p class="class1 class2 class3">< /p >
8、自定义属性
缩写：p[title=”Hello world”]
< p title="Hello world">< /p >
缩写：td[rowspan=2 colspan=3 title]
< td rowspan="2" colspan="3" title="">< /td >
缩写：[a=’value1′ b=”value2″]
< div a="value1" b="value2">< /div >
9、文本：{}
缩写：a{Click me}
< a href="">Click me< /a >
缩写：p>{Click }+a{here}+{ to continue}
< p>Click < a href="">here< /a > to continue< /p >
10、隐式标签
缩写：.class
< div class="class">< /div >
缩写：em>.class
< em>< span class="class">< /span >< /em >
缩写：ul>.class
< ul >
< li class="class">< /li >
< /ul >
缩写：table>.row>.col
< table >
< tr class="row">
< td class="col">< /td >
< /tr >
< /table >
11、HTML
缩写：!
< !doctype html >
< html lang="en">
< head >
< meta charset="UTF-8" >
< title>Document< /title>
< /head >
< body >
< /body >
< /html >
缩写：a
< a href="">< /a >
缩写：a:link
< a href="http://">< /a >
缩写：a:mail
< a href="mailto:">< /a >
缩写：abbr
缩写：link:css
< link rel="stylesheet" href="style.css" / >
缩写：link:favicon
< link rel="shortcut icon" type="image/x-icon" href="favicon.ico" / >
缩写：style
< style>< /style >
缩写：script
< script src="">< /script >
缩写：img
< img src="" alt="" / >
缩写：iframe
< iframe src="" frameborder="0">< /iframe >
缩写：form:get
< form action="" method="get">< /form >
缩写：label
< label for="">< /label >
缩写：input
< input type="text" / >
缩写：inp
< input type="text" name="" id="" / >
缩写：input:h
< input type="hidden" name="" / >
缩写：textarea
< textarea name="" id="" cols="30" rows="10">< /textarea >
缩写：menu:context
< menu type="context">< /menu >
缩写：video
< video src="">< /video >
缩写：html:xml
< html xmlns="http://www.w3.org/1999/xhtml" >< /html >
缩写：btn:s
< button type="submit">< /button >