CSS で効率的に子孫をターゲットにする方法: 個別のリストよりも優れた方法はありますか?

CSS におけるわかりにくい子孫のグループ化

HTML と CSS の世界では、要素のスタイリングは精度と効率が必要なタスクであることがよくあります。ただし、子孫のグループのスタイルを設定する場合、単純な構文の欠如がフラストレーションの原因になる可能性があります。

次のシナリオを考えてみましょう。複数の列と行を持つ HTML テーブルがあり、すべての列見出し (th) と表のセル (td) に同じスタイルを割り当てます。これを実現するために #myTable (th,td) のようなセレクターを使用するだけではなぜできないのでしょうか?

答えは CSS 構文自体にあります。最近まで、CSS はセレクター内の子孫をグループ化する明示的な方法を提供していませんでした。代わりに、#myTable th、#myTable td のように、各子孫を明示的にリストする必要がありました。

しかし、子孫をグループ化するためのより簡潔で効率的な方法が求められ、最近では疑似-クラス。 Mozilla は :-moz-any() を 2010 年に導入し、続いて WebKit の :-webkit-any() を導入しました。これらのプレフィックス付き疑似クラスは目的のグループ化機能を提供できますが、ベンダー固有のコードが必要であり、ルールセットが重複する可能性があるため、その使用は制限されています。

この問題に対処するための最新の取り組みは、提案された :matches です。 () セレクター レベル 4 ワーキング ドラフトの疑似クラス。この新しい疑似クラスは、:any() 提案を改善し、子孫をグループ化するための標準化されたソリューションを提供する可能性があります。ただし、:matches() のサポートはまだ制限されています。

それまでの間、th 要素と td 要素の両方をスタイル設定することが目的の場合は、 #myTable tr > を使用できます。 * テーブル行内に追加の子要素がないことを前提としています。この代替方法により、子孫を個別にリストする必要がなくなり、より効率的で読みやすいアプローチが提供されます。

以上がCSS で効率的に子孫をターゲットにする方法: 個別のリストよりも優れた方法はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。