欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

DIV/CSS 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>

  •  
  • 数列操作符:@

  •  
  • p.item$@-*3 @- = -1

  •  
  • <p class="item3"></p>

  • <p class="item2"></p>

  • <p class="item1"></p>

  •  
  • p.item$@3*3 @3 = 从3开始3次

  •  
  • <p class="item3"></p>

  • <p class="item4"></p>

  • <p class="item5"></p>

  •  
  • p.item$@-3*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

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/wenzhai/h50295.shtml