css - 如何使用第 n 个子表达式设置每一行或列表的最后一个元素的样式

标签 css css-selectors

<分区>

我有一个 ul 列表,其中每个列表都 float 到左侧,其中 width:24%; 为 ul 的全宽,每个列表都有右边距以提供一些空白。

ul.thumbs {
  list-style: none;
  width: 100%;
}
ul.thumbs li {
  display: inline;
  float: left;
  width: 24%;
  margin-right: 1.3%;
  margin-bottom: 15px;
}

.no_rmargin {
  margin-right: 0px !important;
}

这里我对每个最后一个 li 使用类 .no_rmargin 每次动态加载时很难将它添加到行的最后一个列表中有任何子表达式申请这个案子?像 nth-child(4n) my fiddle

最佳答案

如您所说,nth-child(4n) 将完美运行。

您将在 ul.thumbs li 上使用它

ul.thumbs li:nth-child(4n) {
    margin-right:0px;
}

出于示例目的,我更改了样式。

jsFiddle example - 我想这就是你想要的..除非我遗漏了一些明显的东西。

关于css - 如何使用第 n 个子表达式设置每一行或列表的最后一个元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19827012/

相关文章:

html - Bootstrap 中的进度条只显示百分比

javascript - 如何在 javascript 中隐藏 IE 中的空 <span>。 (注意在其他浏览器中工作正常)

不使用 class 或 id 的 Javascript 切换

css - 将最后一个 li 扩展到 ul 的剩余宽度并将其右对齐

html - 布局以填充除 Extjs 中的导航栏之外的所有浏览器窗口

javascript - 如何删除堆积柱形谷歌图表中的白色边框?

html - 如何在响应式 CSS 菜单上添加子菜单

css 选择器选择某个 div 内的所有元素

html - 启用 :hover on margin

javascript - CSS input[value=whatever] 选择器似乎与 input.value 不匹配。我错过了什么?