CSSアドバンスセレクターの詳しい説明-htmlチュートリアル-php.cn

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

零下一度

リリース： 2017-07-26 18:00:23

オリジナル

1787 人が閲覧しました

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 の使用法を説明します。

サンプルコード:

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><title>CSS 高级选择器使用</title><style>* {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;}</style></head><body><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li></ul></body></html>

ログイン後にコピー

概要:

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

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