0

我有一个菜单列表。我没有使用 UL/LI，只是嵌套的 DIV。菜单项之间有图形分隔符。列表中的第一项需要抑制左填充；最后一项需要抑制右填充和图形分隔符。这是CSS：

.platformItem {
  float: left;
  padding: 0 12px;
  background: url(/includes/themes/02RWO/images/assets/separator.gif) no-repeat top right;
}
.platformItem .first {
  padding-left: 0 !important;
}
.platformItem .last {
  padding-right: 0 !important;
  background-image: none !important;
}

这是HTML：

<div id="platformMenu">  
  <div class="platformItem first"><a href="">All</a></div>
  <div class="platformItem"><a href="">Windows</a></div>
  <div class="platformItem"><a href="">Mac</a></div>
  <div class="platformItem"><a href="">Linux</a></div>
  <div class="platformItem last"><a href="">Web</a></div>
  <div class="Clear"></div>
</div>

我希望我可以使用修饰符类来抑制某些属性。这可能吗？有一个更好的方法吗？

谢谢。

4

2 回答 2

1

您可以在现代浏览器中使用第一个子伪选择器。不过，IE7 或 IE8 不支持 last-child。您还可以查看jQuery 的增强选择器：

$(文档).ready(函数(){

$("div span:last-child")
    .css({color:"red", fontSize:"80%"})
});
于 2009-07-22T19:58:33.457 回答
1

毕竟不需要JS。.first 和 .last 不是 .platformItem 的下游，而是 #platformMenu 的下游。（我应该已经看到了。）新代码：

#platformMenu .first {
  padding-left: 0 !important;
}
#platformMenu .last {
  padding-right: 0 !important;
  background-image: none !important;
}
于 2009-07-22T22:09:55.953 回答