CSS div设计第n孩子

-1

我有一个网站设计。CSS div设计第n孩子

我重视的是什么样子的文件。在框中将会有来自MySQL数据库的数据。

我的问题是，是否有可能使它只有一个查询？

我可以通过限制2查询前2个盒子，再次查找第3个和第4个盒子的限制以及其余盒子的第3个查询。

但我认为有可能使CSS与第一个和第二个盒子有一个设计，第三个和第四个盒子有其他设计，其余的设计有其他设计。所以它会像div一样会自动生成，但取决于div的数量，然后应用其他设计。

来源

2017-03-21 net105

你似乎已经知道，第n个子选择器存在 - 那么你在这里的具体问题是什么......？ – CBroe

下面是一个例子。你可以试试这个代码。它已经过全面测试。我希望它能帮助你。

HTML：

<div>test1</div> 
<div>test2</div> 
<div>test3</div> 
<div>test4</div> 
<div>test5</div> 
<div>test6</div> 
<div>test7</div> 
<div>test8</div> 
<div>test9</div> 
<div>test10</div> 
<div>test11</div> 
<div>test12</div>

CSS：

div{ 
    width: 25%; 
    float:left; 
    border:1px solid #ccc; 
    box-sizing: border-box; 
    text-align:center; 
} 
div:nth-child(1), div:nth-child(2){ 
    width: 100%; 
} 
div:nth-child(3), div:nth-child(4){ 
    width: 50%; 
}

演示：

来源

2017-03-21 17:42:09

你写的任何css规则都必须用代数表示。

的+ B-1

需要明确的是，可以有没有来自HTML/DOM传递到CSS的逻辑，除非使用JS。

但是，您可以使用：nth-child（）和：nth-last-child（）一起使用。

MDN :nth-Child refrence

这听起来像你要找的内容会是这样的：

div{ 
    width: 25% 
} 
div:nth-of-type(1), div:nth-of-type(2){ 
    width: 100%; 
} 
div:nth-of-type(3), div:nth-of-type(4){ 
    width: 50%; 
}

来源

2017-03-21 15:52:18 fontophilic

CSS div设计第n孩子

回答

相关问题