0

これは、私が解決しようとしている (または単に理解しようとしている) 問題の Codepen です: http://codepen.io/jhogue/pen/wtLiD

基本的に、フローティング列のセットがあります。nth-of-type新しい行を開始する列をクリアするために使用したい。この場合、4 番目.columnから 3 番目ごと。これが私が働くことを理解(3n+4)する方法です。

そこにもヘッダーが必要です。これが最初のdiv要素です。これは適用する要素 (この場合はクラスを持つ要素) にのみ適用されると思っていましたが、明らかにコンテナー内の最初の要素をカウントしています。nth-of-type.column

それで、nth-of-typeこのように機能しませんか？それがどのように機能するかについての私の理解は間違っていますか？

nth-of-type対すべきことの明確な図nth-child：http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

4

1 に答える 1

0

あなたはもっと創造的になる必要があります。div 内の見出しと段落は必要ない場合があります。ただし、ラッパーが必要な場合は、<header>代わりに次を使用できます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div:nth-of-type(3n+4) {
  color: red; 
}

</style>
</head>
<body>

<div class="container">
    <header>
        <h1>Testing nth-of-type.</h1>
        <p>Thought it would skip this div element.</p>
    </header>
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    <div class="column">Column 4. Want this one. </div>
    <div class="column">Column 5</div>
    <div class="column">Column 6</div>
    <div class="column">Column 7. Want this one. </div>
    <div class="column">Column 8</div>
</div>

</body>
</html>
于 2013-07-31T23:20:47.490 に答える