Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用复杂选择器来优化文档信息

  描述一个逻辑所需的最小信息量是有限的,优化只是尽可能的避免不必要的信息产生。通常页面布局是由HTML和CSS写出来的。我们只能优化其一,要么在HTML中加入大堆class来方便CSS定位;要么用复杂的选择器来代替class来精选元素,简化HTML中的信息。
  不如遇到一个在服务器端遍历列表生成的数据 <style>
ul {list-style:none;width:120px;}
li {overflow:hidden;}
.left {float:left;}
.right {float:right;}
</style>
<ul>
  <li>
    <div class="left">left1</div>
    <div class="right">right1</div>
  </li>
  <li>
    <div class="left">left2</div>
    <div class="right">right2</div>
  </li>
  <li>
    <div class="left">left3</div>
    <div class="right">right3</div>
  </li>
</ul>
  由于每个列表项都是一样的结构,这么写class就非常冗余,列表长时会产生大量多余的信息。所以我觉得这种情况应该由CSS方面来处理。 <style>
ul {list-style:none;width:120px;}
li {overflow:hidden;}
li>div:nth-child(1) {float:left;}
li>div:nth-child(2) {float:right;}
</style>
<ul>
  <li>
    <div>left1</div>
    <div>right1</div>
  </li>
  <li>
    <div>left2</div>
    <div>right2</div>
  </li>
  <li>
    <div>left3</div>
    <div>right3</div>
  </li>
</ul>
  或者可以兼容到IE7。但如果需要兼容IE6那就只能使用class了。 ul {list-style:none;width:120px;}
li {overflow:hidden;}
li>div:first-child {float:left;}
li>div:first-child+div {float:right;}
  当然并不是所有情况都适合用复杂的选择器来替代class,因为这样使用选择器会增加程序的维护成本。对于没有冗余的非列表数据,就没必要这么处理。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^