6

複数の親グループと子孫グループを選択するためのより効率的な方法はありますか？

私が今持っているもの：

aside p, aside h1, aside h2, aside h3, aside h4,
article p, article h1, article h2, article h3, article h4,
section p, section h1, section h2, section h3, section h4 {
  width: 75%;
  padding: 15px 0;
  margin: 0 auto;
  text-align: center;
}
4

5 に答える 5

2

：matches（）

:matches()CSS疑似クラス関数を使用して、親と子孫をグループ化できます。

:matches(aside, article, section) :matches(p, h1, h2, h3, h4)

これを書いている時点では、これはまだ実験的な技術であるため、本番環境で使用する前にブラウザの互換性を確認することをお勧めします。

古いブラウザでは、ベンダープレフィックスの疑似クラスを使用する必要がある場合があります:any()。

:-moz-any(aside, article, section) :-moz-any(p, h1, h2, h3, h4),
:-webkit-any(aside, article, section) :-webkit-any(p, h1, h2, h3, h4),
:matches(aside, article, section) :matches(p, h1, h2, h3, h4)

CSSWGの問題＃3258によると、将来的:matches()に名前が変更される可能性があります。:is()

:is(aside, article, section) :is(p, h1, h2, h3, h4)
于 2018-11-10T01:56:37.853 に答える
1

純粋なCSSを使用する場合、すべてのhタグにクラスを設定する以外は、現在の方法がおそらく最も効率的な手段です。

LESSを使用すると、次のようなことができます。

aside, article, section {
  h1, h2, h3, h4 { ... }
}
于 2013-02-18T23:21:45.727 に答える
1

親に（p、h1-h4）しかない場合は、次のように実行できます。

aside > *, article > *, section > * {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}

直接の子供にのみ影響します。

于 2013-02-18T23:21:50.957 に答える
1

すべてのタグの特異性を削除できます。

p, h1, h2, h3, h4 {
width: 75%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
}
于 2013-02-18T23:19:15.120 に答える
1

最もパフォーマンスが高く、簡潔で具体的なセレクターは、次のようになります。

.selector {
    width: 75%;
    padding: 15px 0;
    margin: 0 auto;
    text-align: center;
}

それがあなたのマークアップを汚染することは意見の余地があるかもしれませんが、純粋なcssパフォーマンスの観点からはこれがそれです。

セレクターに関しては、パフォーマンスが低く、ここ*に示すように、親セレクターを追加しても状況は改善されません。

スタイルシステムは、キーセレクターから始めて、左に移動することでルールを照合します（ルールのセレクターで祖先を探します）。セレクターのサブツリーがチェックアウトを続ける限り、スタイルシステムは、ルールに一致するか、不一致のために放棄されるまで、左に移動し続けます。

最後にもう1つaside, article, section、IE <8ではサポートされていないため、これらのブラウザーでスタイルが選択されることはありません（ポリフィルが使用されているが、それがJSのみの方法である場合を除く）

于 2013-02-19T00:10:34.390 に答える