1つは、さまざまなリストの数、さまざまなレイアウトです。
これはグループの誰かからの質問ですが、他の人も同じようなニーズがあるので、みんなで共有しました。
チャットソフトウェアのグループアバター、または一部の本のグループ化では、多くの場合、複合アバターを大きなアバターとして使用します。
ご覧のとおり、アバターの数が異なり、レイアウトも異なります。
通常の操作
一般的に、誰もが次の方法と同様のレイアウト効果を実現します。
<ul class = "box" data-number = "1"> </ ul> <ul class = "box" data-number = "2"> </ ul> <ul class = "box" data-number = " 3 "> </ ul> …
.box [data-number = "1"] li {}
.box [data-number = "2"] li {}
.box [data-number = "3"] li {}
これは私たちの開発ニーズを満たす良い方法です。唯一の欠点は、サブアバターの数が変更されたときにdata-number、属性値を同時に変更する必要があることです。開発コストは少し面倒です。
実際、それを実装するためのより賢い方法があります。それは、疑似クラスを使用してリスト内のアイテムの数を自動的に決定し、必要なレイアウトを実現することです。
2.あなたが知らないかもしれない疑似クラスの実装技術
この方法では、親要素に現在のリストの番号を設定する必要がないため、HTMLは目立たないように見えます。
<ul class = "box"> <li> </ li> <li> </ li> <li> </ li> … </ ul>
重要なのはCSSです。次に示すように、疑似クラスを使用して現在のリストの数を決定できます。
li：only-child {/ *1ƒ* /}
li：first-child：nth-last-child（2）{/ *2ƒ* /}
li：first-child：nth-last-child（3）{/ *3ƒ* /}
…
CSSでは、疑似クラスをカスケードで使用できるため、リストが一致する場合は:first-child:nth-last-child(2)、現在の<li>要素が最初の子要素であり、後ろから前に2番目の子要素であることを意味します。したがって、現在の合計を判断できます。 2つの<li>サブ要素を使用すると、必要な正確なレイアウトを実現でき、隣接する兄弟セレクターと+湾曲し~た兄弟セレクターを満たすだけで済みます。例：
/ * 3つのliアイテムの最初のリストアイテム* /
li：first-child：nth-last-child（3）{}
/ * 3つのliアイテムの最初のリストアイテムの2番目のリストアイテムアイテムスタイル* /
li ：first-child：nth-last-child（3）+ li {}
/ * 3つのliアイテムの最初のリストアイテムと最初のリストアイテムの後の2つのリストアイテム、つまりアイテム2とアイテム3スタイル* /
li：first-child：nth-last-child（3）〜li {}
見ることは信じています、あなたは激しくここをクリックすることができます：純粋なCSSは自動的に異なるリストと異なるレイアウトのデモの数を認識します
たとえば、2つしかない場合<li>：
<ul> <li> </ li> <li> </ li> </ ul>
効果は次のとおりです。
3つの場合<li>：
<ul> <li> </ li> <li> </ li> <li> </ li> </ ul>
レイアウト効果は次のとおりです。
完全な9つのレイアウト効果は次のとおりです。MP4ビデオ（移動しない場合はクリックしてください）：
3.拡張と拡張：テキストがマルチフォントの場合、テキストサイズは自動的に小さくなります
上記の原則と同様に、より多くのテキストコンテンツと自動フォントサイズ縮小の効果を実現できますが、すべての文字をラベルでラップする必要があり、残りはCSSに任されます。
ここをクリックしてください：テキストのフォントサイズはデモの数に応じて自動的に変更されます
ご覧のとおり、テキストの数が異なると、次のGIFスクリーンショットに示すように、フォントサイズも変更されます。
コアCSSは次のとおりです。
.box span { font-size：40px;
}
.box span：first-child：nth-last-child（n + 13）
、. box
span：first-child：nth-last-child（n + 13）〜span { font-size：30px;
}
.box span：first-child：nth-last-child（n + 17）
、. box span：first-child：nth-last-child（n + 17）
〜span { font-size：20px;
}
.box span：first-child：nth-last-child（n + 25）
、. box span：first-child：nth-last-child（n + 25）
〜span { font-size：14px;
}
文字数が13を超え、17を超え、25を超える場合のスタイルを示します。
さらに、「Cicada Principle」を使用すると、リストに対してよりランダムなスタイル効果を実現することもできます（テーブルの横断歩道は法律によって制御されます。実際、複合疑似クラスを使用してランダム性を実現できます）。後でこれを拡張するチャンスがあります。
そもそも、この記事のこのテクニックは、HTMLを変更できない場合に非常に適しています。オタクもいますが、重要な瞬間に神の操作になる可能性があります。
このメソッドはIE9 +でサポートされているため、自信を持って使用してください。
読んでくれてありがとう、そしてコミュニケーションを歓迎します！