代码之家 › 专栏 › 技术社区 › NotoriousWebmaster

在列表的开始和结束处取消属性

styling menu css

NotoriousWebmaster · 技术社区 · 16 年前

我有菜单单。我不使用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>

我希望我可以用 修饰语 类。这有可能吗?有更好的方法吗?

谢谢。

2 回复 | 直到 16 年前

Jon Galloway 16 年前

你可以使用 first-child 现代浏览器中的伪选择器。 last-child isn't supported in IE7 or IE8 但是。你也可以看看 jQuery's enhanced selectors :

$(document).ready(函数()。{

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

NotoriousWebmaster 16 年前

毕竟不需要JS。.first和.last不是来自.platformitem的下游,而是来自platformmenu。(我应该看到这个。)新代码:

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

11 月前

Mass · 如何在Tailwind CSS v4中创建配置

11 月前

magenta placenta · 将css变量合并为一个变量

11 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

11 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前