17

幅が 25% の記事を並べて掲載しました。clear:both4 要素ごとに を追加しています。ただし、要素間にグラフィカルなセクション区切りを挿入する必要があります。そして、それは の中になければなりません<ul>。有効にするために、「セクション区切り」(下のサンプルの最初の li アイテム) も にラップしました<li>。

<ul>
    <li class="year"><h1>THIS IS A SECTION Break and 100% wide</h1></li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
    <li>This is a article and only 25% wide</li>
</ul>

4 つおきの要素を改行にしたいので、…</p> 

ul li:nth-of-type(4n+1) { clear: both; }

li.yearただし、この動作の影響を受けないようにしたいので、これを試しました

ul li:not(.year):nth-of-type(4n+1) { clear: both; }

現在、<li>上記のサンプル コードの最後の行は次の行にフロートされていますが、最初のコードはフロートされた<li>記事ではなく、見出しが含まれているため、これは発生しないはずです。

:notとnth-of-type()セレクターを互いに積み重ねることは可能ですか?

4

2 に答える 2

9

あなたが持っているセレクター -

ul li:not(.year):nth-of-type(4n+1) { background: yellow; }

-- 完全に正しいです (セレクターを強調表示することで示されます)。

問題は、使用方法にありますclear。を使用してから、次の要素を使用すると機能しますclear:right。clear:left

ul li:not(.year):nth-of-type(4n+1) { clear: right;  }
ul li:not(.year):nth-of-type(4n+2) { clear: left;  }

コメントごとに編集 取り消し線のテキストはナンセンスです。BoltClock の回答によると、実際の問題は、:not疑似クラスが影響しないことnth-of-typeです。:notこの場合、セレクタ オフセットの調整は偶然に機能しますが、パターンが異なる場合は機能しません。

ul li:not(.year):nth-of-type(4n+2) { clear: left;  }

http://jsfiddle.net/8MuCU/

于 2012-09-10T17:03:37.507 に答える
8

あなたが機能して:not()いないように見える理由は、が（当然のことながら）li.year残りの要素と同じ要素タイプであるため、クラスに関係なく同じ要素に一致するためです。li:nth-of-type(4n+1).year

セレクターを順番に積み重ねることもできません。それは彼らがどのように機能するかだけではありません。

liHTML マークアップ規則のために要素を別のものに変更することはできず:nth-match()、将来の仕様であり、まだ実装されていない:nth-of-type()ため、代わりに構造に対応するように数式を変更する必要があります。

ul li:not(.year):nth-of-type(4n+2) { clear: both; }
于 2012-09-10T16:56:14.300 に答える