html - css 类的第 n 个子节点(偶数)不是所有节点

标签 html css css-selectors

尝试只为类 'story' 的某些其他 div 着色:

<div class="wrap-well">
    <div class="story">odd</div>
    <div class="story">even</div>
    <div class="clearfix"></div>
    <div class="story">odd</div>
    <div class="story">even</div>
    <div class="clearfix"></div>
    <div class="story">odd</div>
    <div class="story">even</div>
</div>

CSS:

.wrap-well div.story:nth-child(even) {
    background-color:#ff00ff;
}

fiddle : http://jsfiddle.net/NF2dk/

但似乎 'clearfix' 列也被计算在内......

最佳答案

@Marcin 和@Explosion Pills 在这里绝对正确,但当我检查你的 DOM 时,你有一个一致的模式,你可以使用相邻选择器来实现这一点,而不是使用 nth-childnth-of-type

.wrap-well div.story + div.story {
    background-color:#ff00ff;
}

Demo

这样,它就会完成你想要实现的工作,而且与 nth 伪类相比,它的兼容性要好得多

关于html - css 类的第 n 个子节点(偶数)不是所有节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21464716/

相关文章:

css - Safari 字体粗细问题,文字太粗

css - 使用css对齐菜单中的单个按钮

html - wordpress 生成的 css 未被应用

html - 忽略嵌套列表中的第 n 个子样式?

javascript - 如何在另一个div为空时隐藏一个div

javascript - 在 CSS 转换后用新内容替换空白区域

javascript - jQuery UI(在屏幕上可见时运行)

html - 无法在 IE 中将 div 放置在 iframe 上

javascript - 重写伪元素水平。垂直

javascript - 文档 querySelectorAll 查找元素属性名称的一部分?