css3類型限於類的第n個

有沒有辦法將css3的nth-of-type限制到一個類？我有一個動態數字section元素與不同的類指定他們的佈局需求。我想抓住每個第三個.module，但看起來nth-of-type查找類元素類型，然後計算類型。相反，我想限制它只有.module s。css3類型限於類的第n個

謝謝！

的jsfiddle證明：http://jsfiddle.net/danielredwood/e2BAq/1/

HTML：

<section class="featured video"> 
    <h1>VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO (3)</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO</h1> 
</section> 
<section class="featured module"> 
    <h1>NOT A VIDEO (6)</h1> 
</section>

CSS：

.featured { 
    width:31%; 
    margin:0 0 20px 0; 
    padding:0 3.5% 2em 0; 
    float:left; 
    background:#ccc; 
} 
    .featured.module:nth-of-type(3n+3) { 
    padding-right:0; 
    background:red; 
    } 
    .featured.video { 
    width:auto; 
    padding:0 0 2em 0; 
    float:none; 
    }

來源

2012-06-06 technopeasant

'：第n -of-type（）'是一個僞類，而不是僞元素。 – BoltClock

不幸的是，有沒有辦法（至少沒有我知道的）選擇的nth-of-type一個班級，因爲nth-of-class不存在。您可能需要手動爲每個第三個.module添加一個新類。

來源

2012-06-07 12:38:44 Andrej

無法選擇類的'：nth-of-type（）'，因爲'：nth-of-type（）只選擇它的**類型**的第n個子元素。另請參閱http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name – BoltClock

nth類型的行爲是如此意外。 .thing：nth-of-type（1）實際上是div.thing：類型爲n的（1），所以如果你沒有在你的選擇器中包含這個元素，這會讓人感到困惑。如果你不認爲這是意想不到的，那麼爲什麼它會在開發人員中引起如此多的混淆？ –

@Dominic Watson：我認爲這裏的問題是，大多數作者不熟悉術語「元素類型」，Selectors使用該元素來代替HTML/XML特定術語「標記名稱」。這在選擇器級別4中稍微澄清了一點，但不是很多。 – BoltClock

看來你真正想要的是css4 :nth-match selector，但它不是真正支持大多數的瀏覽器還沒有，所以目前，做到這一點的唯一方法是用JavaScript

$(".featured.module").filter(function(index, element){ 
    return index % 3 == 2; 
}).addClass("third");

http://jsfiddle.net/w3af16dj/

來源

2015-04-21 02:31:07

爲什麼你將'element'作爲參數傳遞給函數？它不是用於 – bg17aw

，因爲我認爲它對於SO讀者是有用的參考，當我寫這個答案時，我必須檢查文檔來記住哪個論點最先出現。我還假設有些人會修改代碼。 –

不知道誰會降低這一點，提供當前的答案和（仍然）未來答案。爲了節省任何人的努力，如果你考慮到它，2017年Chrome中不支持'nth-match'。不需要爲我檢查其他瀏覽器。 –

css3類型限於類的第n個

回答

相關問題