CSS セレクターで子孫をグループ化できないのはなぜですか?

CSS セレクターで子孫をグループ化できないのはなぜですか?

従来、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 サイトの他の関連記事を参照してください。