従来、CSS には同じスタイルを子孫のグループに適用する効率的な方法がありませんでした。次の HTML テーブルについて考えてみましょう:
<code class="html"><table id='myTable'> <tr> <th></th> <th></th> <th></th> </tr> . . . <tr> <td></td> <td></td> <td></td> </tr> </table></code>
列見出しとセルの両方のスタイルを設定するには、従来のセレクターでは両方の要素を指定する必要があります:
<code class="css">#myTable th, #myTable td {}</code>
なぜ次のようなより簡潔な構文がないのですか:
<code class="css">#myTable (th,td) {}</code>
ソリューションの進化
当初、:any() 疑似クラスが提案された 2008 年まで、有用な構文の提案はありませんでした。 。 Mozilla は 2010 年に :-moz-any() として実装し、続いて 2011 年に WebKit の :-webkit-any() として実装しました。
しかし、両方のプレフィックスを同時に使用するとルールセットの複製が必要となり、目的が果たせませんでした。その結果、これらのプレフィックス付きセレクターは実用的ではないと考えられています。
セレクターのレベル 4 作業草案には、オリジナルの :any() をベースとした、潜在的な拡張機能を備えた :matches() の提案が含まれています。ただし、ブラウザのサポートにはしばらく時間がかかることが予想されます。
回避策
th 要素と td 要素の両方を特にスタイル設定するには、tr 要素がセル要素のみを含む:
<code class="css">#myTable tr > * {}</code>
あるいは、パフォーマンス上の理由から、より長い従来の方法を好む場合もあります。
以上がCSS セレクターで子孫をグループ化できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。