ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS セレクターで子孫をグループ化できないのはなぜですか?

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

Mary-Kate Olsen
リリース: 2024-11-02 14:32:02
オリジナル
719 人が閲覧しました

Why Can't You Group Descendants in CSS Selectors?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート