CSS 3 nth of type 仅限于类

标签 css css-selectors pseudo-class

<分区>

有没有办法将 CSS 3 的 nth-of-type 限制为一个类?我有一个动态数量的 section 元素,其中不同的类指定了它们的布局需求。我想捕获每三个 .module,但似乎 nth-of-type 查找类元素类型,然后计算类型。相反,我想将其限制为仅 .module

JSFiddle 演示:http://jsfiddle.net/danielredwood/e2BAq/1/

HTML:

<section class="featured video">
    <h1>VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO (3)</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO (6)</h1>
</section>

CSS:

.featured {
  width: 31%;
  margin: 0 0 20px 0;
  padding: 0 3.5% 2em 0;
  float: left;
  background: #ccc;
}

.featured.module:nth-of-type(3n+3) {
  padding-right: 0;
  background: red;
}

.featured.video {
  width: auto;
  padding: 0 0 2em 0;
  float: none;
}​

最佳答案

不幸的是,没有任何方法(至少我不知道)来选择类的 nth-of-type,因为 nth-of-class不存在。您可能需要手动向每三个 .module 添加一个新类。

关于CSS 3 nth of type 仅限于类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28342499/

上一篇:javascript - 使用带有 IE 的 JQuery 在悬停时突出显示表行 - 所有版本

下一篇:html - 在 Chrome 上运行良好的 Css 3D 动画在 Safari 上不起作用

相关文章:

php - 检测移动设备,如果移动设备使用替代的 css 样式表?

html - CSS - 在另一个 div 中居中一个 div(非嵌套)

css - 你能在 CSS 或 SCSS 中链接 anchor 伪类吗?

html - 如何在我的代码中使用第一个 child ?

css - 如何使用::after 定位 CSS 三 Angular 形?

css - ie7中的水平滚动条

javascript - 尝试从 'hover' CSS 过渡转换为类似的 javascript 功能。失败了

jQuery 选择棋子路径中的所有 <td>

html - 使用 :not(selector) 选择除少数元素之外的所有元素

html - 影响与最初选择的元素无关的元素