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

回答

相關問題