通过伪选择器 CSS 获取特定的兄弟

Question

我一直在阅读许多关于如何通过伪选择器设置特定兄弟姐妹样式的示例，例如

http://andr3.net/blog/post/142

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ CSS 可以检测元素的子元素数量吗？

但我面临的问题很特别。我正在研究一个网格系统，其中最多可以包含 8 个 div（col-）。它们的宽度是根据您应用的类自动设置的。

这是全尺寸演示 http://fiddle.jshell.net/6Wb6W/1/show/light/

这是 css 和标记 http://jsfiddle.net/6Wb6W/1/

现在在浏览器宽度 979px 上，我想放下（移动到 100% 宽）；

3rd column in 3 column grid and make it 100% wide 
5th column in 5 column grid and make it 100% wide 

我以前通过 js 执行此操作并计算行内有多少列并更改宽度或将新类应用于您想要的类，但我希望仅通过 css 来执行此操作。

我尝试过nth:child在 3 或 5 个网格列上使用伪类。我所做的任何组合都会使第 6 和第 8 列网格一团糟。在这里测试了我能想到的所有可能的选项 http://css-tricks.com/examples/nth-child-tester/# 并且无法找到解决方案。

我不想添加任何额外的 div id 名称并像这样定位它们。过去已经有了这样的“解决方案”和 js mambo jumbo，但真的很想摆脱所有这些，只使用纯 css。

任何帮助表示赞赏。

解决方案： 感谢chandu，我们赢了。 http://fiddle.jshell.net/6Wb6W/8/show/light/ 强大的移动就绪网格布局，几乎适合您可能需要的任何可能的布局选项。这将成为 YJSG 2.0 的一部分 http://www.youjoomla.com/yjsg-framework-blog/yjsg-v2-0-0-white-paper.html

Answer 1

我认为这对你很有帮助。

将display: none;css 用于第 3 列第 3 div 和第 5 列第 5 div 响应 979px

@media screen and (max-width: 979px) {

    [class*='yjsg-col-'] {
        width: 50%;
    }
    .yjsg-col-1 {
        width:100%;
    }
    [class*='yjsg-col-1-']:nth-child(odd):last-child{
    /*color:red;*/
    display:none;
  }
}

更新的小提琴

注意：在小提琴中，我用红色突出显示了选定的列，请注意一个