Question

我一直在阅读许多关于如何通过伪选择器（如

）设置特定兄弟节点样式的示例

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名称并将其作为目标。已经有这样的＆＃34;解决方案＆＃34;和js mambo jumbo过去但是真的想摆脱所有这些并且只使用纯粹的CSS。

感谢任何帮助。

解决方案： Thnx到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

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

2 个答案: