CSSアドバンスセレクターの詳しい説明

CSS は、Web デザイナーが利用できる最も強力なツールの 1 つです。これを使用すると、ページタグを変更せずに、Web サイトのインターフェースを数分で変更できます。しかし、CSS セレクターが便利であると誰もが認識しているという事実にもかかわらず、CSS セレクターはその潜在能力を発揮するには程遠く、時々、過剰で役に立たないクラス、ID、div、Span などを使用する傾向があります。私たちの HTML は非常に乱雑です。

タグ内でこれらの「疫病」が蔓延するのを避け、タグをクリーンでセマンティックな状態に保つ最善の方法は、追加のクラスや ID を使用せずに特定の要素をターゲットにできる、より複雑な CSS セレクターを使用することです。コードとスタイルがより柔軟になります。

CSS の優先度

高度な CSS セレクターの領域を掘り下げる前に、セレクターを適切に使用し、簡単に解決できる問題のデバッグに多くの時間を費やすことを避けるために、CSS の優先度がどのように機能するかを理解することが重要です。優先順位に注意を払う限り

CSS を記述するときは、カスケード内の他のセレクターよりも上位になるいくつかのセレクターに注意を払う必要があります。それらは最後に記述します。セレクターは、以前に作成したスタイルを必ずしもオーバーライドするわけではありません。同じ要素です。

それでは、指定されたセレクターの優先度をどのように計算するのでしょうか?優先順位が、1、1、1、1 または 0、2、0、1 のように、カンマで区切られた 4 つの数字で表現されると考えると、非常に簡単です

最初の数字 (a) は、style 属性が指定されていない限り、通常は 0 です。はタグで使用されます。

2 番目の数値 (b) はセレクターの ID の数の合計です。

3 番目の数値 (c) はセレクターで使用される他の属性です。セレクターと疑似クラスの合計です。これには、クラス (.example) と属性セレクター (li[id=red] など) が含まれます。

4 番目の数値 (d) は、要素 (table、p、div など) と疑似要素 (first など) をカウントします。 -line など);

ユニバーサル セレクター (*) の優先順位は 0 です。

2 つのセレクターの優先順位が同じ場合、スタイル シート内の後の方が有効になります。

理解しやすいようにいくつかの例を見てみましょう:

#sidebar h2 — 0, 1, 0, 1

h2.title — 0, 0, 1, 1

h2 + p — 0, 0, 0, 2

#sidebar p:first-line — 0, 1, 0, 2

以下の例では、最初のものは 2 番目のものより優先順位が高いため機能します:

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

重要です優先順位がどのように機能するかを少なくとも理解する必要がありますが、Firebug などの一部のツールでは、特定の要素を確認するときに、すべての CSS セレクターのペアをセレクターの優先順位の順にリストして、特定の要素で何が起こっているかを知ることができます。どのセレクターが有効かを知るために。

以下の例では、主に nth-child、first-child、last-child、nth-of-type、first-of-type、last-of-type の使用法を説明します。

サンプルコード:

76c82f278ac045591c9159d381de2c57f2fff6a208c3e290698f287c1c0e7a5393f0f5c25f18dab9d176bd4f6de5d30e03fc48c6e8e131d94ca98b8e034341f4b2386ffb911b14667cb8f0f91ea547a7CSS 高级选择器使用6e916e0f7d1e588d4f442bf645aedb2fc9ccee2e6ea535a969eb3f532ad9fe89* {padding: 0;margin: 0;}/*IE8不支持 IE9支持*/
            li:nth-child(3n+1) {color: red;}/*IE7+以上浏览器均支持*/
            li:first-child {color: blue;}/*IE8不支持 IE9以上支持*/
            li:last-child {color: green;}/*IE8不支持 IE9以上支持*/
            li:nth-of-type(odd) {color: #8D8D8D;}/*IE8不支持 IE9以上支持*/
            li:first-of-type {color: #92B8B1;}/*IE8不支持 IE9以上支持*/
            li:last-of-type {color: #2E2D3C;}531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6Item 1bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 2bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 3bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 4bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 5bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 6bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 7bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b94468936cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

概要:

最初の子セレクターが IE7 以降と互換性があることを除き、他のセレクターは互換性があるために IE9 以降のブラウザーを必要とします。

以上がCSSアドバンスセレクターの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。