使用公式的第n個孩子

你好我有6個縮略圖，每個縮略圖都有相同的類別。我想第二，第五有margin-left:36px;和第三和第六有83px。使用公式的第n個孩子

，所以我寫的CSS這樣

.commitee-members{ 
    margin:10px 15px; 
} 
.commitee-members-outers:nth-child(3n+2) .commitee-members{ 
    margin-left: 36px; 
} 
.commitee-members-outers:nth-child(3n+3) .commitee-members{ 
    margin-left: 83px; 
}

我不知道爲什麼，但第5級了margin-left:83px，他六年級沒有必須margin-left:83px。，所以我查了一些工作，但此時其工作我的繼承人的情況下

https://jsfiddle.net/bheoqL9e/1/

，你可以看到，它搞砸

但這項工作 https://jsfiddle.net/crgruyu3/ 的工作，請大家幫忙

來源

2016-08-31 antonscie

這將在您的代碼中選擇第3和第6個元素。

.commitee-members-outers:nth-child(4n+3) .commitee-members{ 
    margin-left: 83px; 
}

來源

2016-08-31 18:29:43 Vcasso

waw tq buddy 。不知道這個公式保存我的案例 – antonscie

不客氣！ – Vcasso

該元素內有8個子女：3 .commitee-members-outers,1 .clearfix,3 .commitee-members-outers,1 .clearfix。所有這些元素都被選中。

您可以對.clearfix元素使用不同的標籤，並使用:nth-of-type來僅計算.commitee-members-outers。

<body> 
    <div class="commitee-members-outers"></div> 
    <div class="commitee-members-outers"></div> 
    <div class="commitee-members-outers"></div> 
    <hr class="clearfix" /> 
    <div class="commitee-members-outers"></div> 
    <div class="commitee-members-outers"></div> 
    <div class="commitee-members-outers"></div> 
    <hr class="clearfix" /> 
</body>

jsFiddle

來源

2016-08-31 18:26:03 Whothehellisthat

我需要div class clearfix來使它成爲1行事件，每個coloumn具有不同的高度。我試着用你的代碼

但它沒有工作。 – antonscie

小提琴沒有任何CSS。 Div和HR都是可以用相同方式設計的元素：[jsFiddle]（https://jsfiddle.net/bheoqL9e/3/） – Whothehellisthat

希望這可以說明真正的問題是什麼：無論如何：P – Whothehellisthat

其因<div class="clearfix"></div>遮住第n個孩子財產。嘗試使用其他方法來對齊&。

來源

2016-08-31 18:27:36