一、HTML
1、嵌套操作
>: Child
+: Sibling
^: Climb-up
*: 乘法, 如 ul>li*5,将生成如下结果
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
(): 分组,如 (header>ul>li*2)+footer>p,结果如下
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
2、属性操作
ID和Class,如div#header.class1.class2.class3, 结果如下:
<div id="footer" class="class1 class2 class3"></div>
也可以自定义属性,如td[title=”hello” colspan=3],属性可以不用引号,结果如下:
<td title="Hello world!" colspan="3"></td>
3、序列
结合之前的嵌套操作和属性操作, 通过*和$可以输出数字序列, 如ul>li.item$*3,结果如下:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
通过@, 可以改变数字序列的顺序以及基数,如ul>li$@2-*3
<ul>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
</ul>
4、文字
{}: 通过大括号(curly braces)在元素中插入文字, 如a{Click me}
<a href="">Click me</a>
注意:a{click}+b{here} 和 a>{click}+b{here} 的区别
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
二、CSS
1. w100 -- width:100px;
2. h5p -- height:5%;
3. oh / ovh /ov-h -- overflow:hidden;
zm1 -- zoom:1;
4. o0 -- opacity:0;
op+ -- opacity: ;
filter:alpha(opacity=);
op:ie -- -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
5. db -- display:block;
dib -- display:inline-block;
6. trf -- transform各种兼容
trf:sc -- transform:scale();
trs -- transition
bdrs -- border-radius及各种前缀
bxsh -- box-shadow
7. bdb -- border-bottom
bdt -- border-top
bdl -- border-left
bdr -- border-right
8. fz -- font-size
fw -- font-weight
fw400 -- font-weight:400;
ff -- font-family
9. m-10-2-0-12 -- margin:10px 2px 0 12px;
10. c#0 -- color:#000;
cra -- color: rgba(0,0,0.5);
11. bd1-s-red -- border:1px solid red;
bd+ -- border: 1px solid #000;
bdb+ -- border-bottom: 1px solid #000;
12. m0-auto-0 -- margin:0 auto 0;
13. lh1.6 -- line-height:1.6;
vam -- vertical-align:middle;
tac -- text-align: center;
td -- text-decoration:none;
tdu -- text-decoration:underline;
ti -- text-indent
14. z10 -- z-index:10;
15. bg -- background
bgc -- background-color
bgsz:cv -- background-size:cover;
bg+ -- background:#fff url() 0 0 no-repeat;
16. pos: a -- position:absolute;
pos: r -- position: relative;
pos: f -- position: fixed;
17. fl -- float:left;
fr -- float:right;
18. curp -- cursor: pointer;