通过伪选择器 CSS 获取特定的同级

Question

我一直在阅读许多关于如何通过像

之类的伪选择器来设置特定兄弟姐妹样式的示例

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

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Can CSS detect the number of children an element has?

但我面临的问题很特殊。 我正在研究一个网格系统，其中最多可以包含 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 执行此操作。

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

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

感谢任何帮助。

解决方案： Thnx to 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;
  }
}

更新Fiddle

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

Answer 2

除非我误解了这个问题，否则所选答案对我来说看起来有点“过于复杂”......！ ;-)

当然您也可以使用nth-child() 选择器。

现在浏览器宽度为 979px ，我想放弃；

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

@media screen and (max-width: 979px) {
    ...
    .yjsg-col-1-3:nth-child(3) {
        width:100%;
    }
    ...
    .yjsg-col-1-5:nth-child(5) {
       width:100%;
   }

不确定您所说的 drop 是什么意思！？
但是，如果您的意思是“隐藏/不显示”相应的列，那么您可以简单地在上述 CSS 中为这些列设置 display: none;。

你已经知道CSS-TRICKS，也看看：:nth-Tester！

这是您更新后的JSFiddle