CSS：取消列表开头和结尾的属性答案

【问题标题】：CSS: Cancelling properties at the start and end of a listCSS：取消列表开头和结尾的属性
【发布时间】：2009-07-22 19:55:52
【问题描述】：

我有一个菜单列表。我没有使用 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>

我希望我可以使用 modifier 类来抑制某些属性。这可能吗？有没有更好的方法来做到这一点？

谢谢。

【问题讨论】：

关于您的 html 的一些小细节：（1）这对我来说看起来像一个
不要吹毛求疵，乔恩。很有可能我会切换到 UL。

标签： css menu styling

【解决方案1】：

您可以在现代浏览器中使用first-child 伪选择器。 last-child isn't supported in IE7 or IE8，不过。也可以看jQuery's enhanced selectors：

$(document).ready(function(){

$("div span:last-child")
    .css({color:"red", fontSize:"80%"})
});

【讨论】：

是的，在理想的世界中，我们只会处理现代浏览器。我们生活的这个农场世界的解决方案是什么？
是的，可以。但我只是开始这个布局：我希望在 CSS 中完成，而不必在一段时间内求助于 JS... 使用 UL/LI 会带来任何好处吗？（顺便说一句，谢谢你的帮助。）
UL/LI 带来的好处是让您自己和任何维护者更清楚这些项目是一个列表；这就是语义的论据。如果您不关心语义，则可以将 any 块级项放在 DIV 中，将 any 内联项放在跨度中（然后就更难理解这些元素的含义）。除此之外，CSS 可以选择元素，无论它们是 LI 还是 DIV/DIV。同意 John Galloway 的观点——内部 div/列表项上的 platformItem 类是不必要的。为了兼容性，您至少需要 'last' 类，因为 :last-child 在 IE 中不受支持。
所以 UL/LI 的问题在于，您需要添加许多属性来去除默认样式，然后才能获得所需的样式。但我完全支持语义，Val；所以我会保留我刚刚切换到的 UL/LI。

【解决方案2】：

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

#platformMenu .first {
  padding-left: 0 !important;
}
#platformMenu .last {
  padding-right: 0 !important;
  background-image: none !important;
}

【讨论】：

哦，对了。我以为您也试图摆脱 .first 和 .last 类。如果您的目标是 IE7+，则不需要 .first，您可以使用 #platformMeu div:first-child。
+1，因为如果您可以控制标记，在大多数环境中这是更可靠的选择。
不需要您的 !important-s，因为您的特异性足以覆盖当前声明的特异性。