§ ITPOW >> 文档 >> CSS

作者：vkvi 来源：ITPOW（原创） 日期：2017-2-23

有时候，我们希望为列表设置 border-top 或 margin-top 之类的，但又不希望为第一项设置。

法一、单独设置 class

<style type="text/css"> .section { border-top:1px solid #ccc; } .firstSection { border-top:none; } </style> <div> <div class="section firstSection">1</div> <div class="section">2</div> <div class="section">3</div> </div>

法二、使用伪类选择

<style type="text/css"> .section { border-top:1px solid #ccc; } .section:first-child { border-top:none; } </style> <div> <div class="section">1</div> <div class="section">2</div> <div class="section">3</div> </div>

法三、使用条件选择

<style type="text/css"> .section { border-top:1px solid #ccc; } .section[class~="first"] { border-top:none; } </style> <div> <div class="section first">1</div> <div class="section">2</div> <div class="section">3</div> </div>

很多人会对法三纳闷，这么奇葩，有什么用啊。

这是因为法二必须要是父级的第一个元素，有时候前面还有这样那样的挡着，所以并不一定合适。请参见 :first-child 为什么无效。

而有些人觉得 firstSection 这个名称不爽，而 first 这个名称可能其他地方也在用，为避免冲突，就用 .section[class~="first"] 了。它表示 .section 的标签中，class 中含有 first 的。