CSS div设计nth-child

Question

我有一个网站设计。

我附加了文件的外观。 在框中，将有一个来自MySQL数据库的数据。

我的问题是，是否只有一个查询就能做到？

我可以通过对前2个框进行限制2的查询，对第3个框和第4个框进行限制的查询，以及对其余框的第3个查询来进行查询。

但是我认为可以使用CSS来使第一个和第二个框具有设计，而第3个和第4个框具有其他设计，而其他框则具有其他设计。 因此，就像将自动生成div一样，但取决于div的数量，然后应用其他设计。

Answer 1

这是一个例子。 您可以尝试此代码。 经过充分测试。 希望对您有帮助。

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%;
}

演示：

Answer 2

您编写的任何CSS规则都必须用代数表示。

an + b-1

需要明确的是，除非使用JS，否则从HTML / DOM到CSS不会传递任何逻辑。

但是，在音乐会中使用：nth-​​child（）和：nth-​​last-child（）可能会变得非常复杂。

MDN：第n个儿童的参考

听起来您正在寻找的是这样的：

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%;
}