Html CSS div设计第n个子项

我有一个网站设计

我附上了它看起来像什么的文件。在这些框中会有来自MySQL数据库的数据

我的问题是，是否有可能只通过一个查询就可以实现

我可以通过对前两个框进行限制2的查询，对第三个和第四个框进行限制，对其余框进行第三次查询来实现

---

但是我认为有可能使用CSS使第一个和第二个框有一种设计，第三个和第四个框有另一种设计，其余的则有另一种设计。因此，它就像一个div将自动生成，但取决于div的数量，然后应用其他设计。

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

an+b-1

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

但是，同时使用：nth-child（）和：nth-last-child（）可能会变得非常复杂

听起来你想要的是：

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

---

这里有一个例子。你可以试试这个代码。它经过了充分的测试。我希望它能帮助你

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>

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

演示：

<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>

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

---

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