1. 程式人生 > >快速編寫html

快速編寫html

1. 巢狀操作----------
  
子操作: >
  
div>ul>li
  
<div>
    <ul>
        <li></li>
    </ul>
</div>
  
並列:+
  
div+ul>li
  
<div></div>
<ul>
    <li></li>
</ul>
  
上級:^
  
ul>li^div
  
<ul>
    <li></li>
</ul>
<div></div>
  
ul>li>a^^div 上級多層
  
<ul>
    <li><a href=""></a></li>
</ul>
<div></div>
  
重複:*
  
ul>li*3
  
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
  
分組:()
          
div>(p>span)*2
  
<div>
    <p><span></span></p>
    <p><span></span></p>
</div>
  
2. 屬性操作----------
  
id和類
  
div#header+div.main+div#footer
  
<div id="header"></div>
<div class="main"></div>
<div id="footer"></div>
  
屬性值
  
a[title=test target=_self]
  
<a title="test" target="_self" href=""></a>
  
數列值:$
  
p.item$*3
  
<p class="item1"></p>
<p class="item2"></p>
<p class="item3"></p>
  
p.item$$*3
  
<p class="item01"></p>
<p class="item02"></p>
<p class="item03"></p>
  
數列操作符:@
  
[email protected]
*3 @- = -1 <p class="item3"></p> <p class="item2"></p> <p class="item1"></p> [email protected]*3 @3 = 從3開始3次 <p class="item3"></p> <p class="item4"></p> <p class="item5"></p> [email protected]
*3 @-3 = 3次後到3結束 <p class="item5"></p> <p class="item4"></p> <p class="item3"></p> 3. 字元操作---------- 字元操作:{} a{click} <a href="">click</a> a>{click}+span{me} <a href="">click<span>me</span></a> 4. 預設元素---------- .header+.footer --------------- div.header+div.footer ul>.item*3 -------------- ul>li.item*3 table>.row*4>.cell*3 -------------- table>tr.row*4>td.cell*3