CSS は Cascading Style Sheets の略で、カスケードの概念が非常に重要であることを意味します。最も基本的なレベルでは、CSS ルールの順序が重要であることがわかりますが、それはさらに複雑です。カスケードでどのセレクターが勝つかは、次の 3 つの要素によって決まります (これらは重みの順であり、前のものが後のものより優先されます):
重要度
専門性の特異性
ソースの順序
CSS には、1 つのルールが常に他のルールよりも優先されることを許可する特別な構文 (!重要) があります。プロパティ値の後に追加すると、ステートメントが信じられないほど強力になります。
注: この ! important 宣言をオーバーライドする唯一の方法は、同じ ! important 属性の宣言を後のソース コードまたはより具体性の高いソース コードに含めることです。
! important の存在を知っておくと、他の人のコードでこれを見つけたときに、それが何であるかがわかるので便利です。しかし!どうしても必要な場合を除き、決して使用しないことをお勧めします。これを使用する必要がある状況の 1 つは、コア CSS モジュールを編集できない CMS で作業していて、他の方法ではオーバーライドできないスタイルを実際にオーバーライドしたい場合です。 ただし、避けられる場合は使用しないでください。 ! important はカスケードの適切な動作方法を変更するため、特に大きなスタイルシートの場合、CSS の問題のデバッグが非常に困難になる可能性があります。
CSS 宣言の重要性は、どのスタイル シートで指定されているかによって異なることに注意してください。ユーザーはカスタム スタイル シートを設定して開発者のスタイルをオーバーライドできます。たとえば、ユーザーは視覚障害があり、スタイル シートを設定したい場合があります。フォント アクセス可能なすべての Web ページのサイズは、読みやすくするために通常の 2 倍になっています。
矛盾する宣言は次の順序で適用されます。後者の宣言は前の宣言をオーバーライドします:
ユーザー エージェント スタイル シートの宣言 (例: 他の宣言のないブラウザのデフォルト スタイル)。
ユーザー スタイル シート (ユーザーが設定したカスタム スタイル) での通常の宣言。
著者スタイルシートの通常の宣言 (これは、Web 開発者が設定したスタイルです)。
作成者スタイルシートの重要な宣言
ユーザースタイルシートの重要な宣言(最優先)
デザインを維持できるように、Web開発者のスタイルシートがユーザーのスタイルシートをオーバーライドすることは合理的です。予想されていますが、場合によってはユーザーには Web 開発者スタイルをオーバーライドする十分な理由があります。前述したように、ユーザーのルールで ! important
を使用することでこれを行うことができます。 !important
。
特殊性基本上是衡量选择器的具体程度的一种方法——它能匹配多少元素。如上面所示的示例所示,元素选择器具有很低的特殊性。类选择器具有更高特殊性,所以将战胜元素选择器。ID选择器有甚至更高的专用性, 所以将战胜类选择器。
一个选择器具有的专用性的量是用四种不同的值(或组件)来衡量的,它们可以被认为是千位,百位,十位和个位——在四个列中的四个简单数字:
千位:如果声明是在 style 属性中该列加1分(这样的声明没有选择器,所以它们的专用性总是1000。)否则为0。
百位:在整个选择器中每包含一个 ID选择器就
在该列中加1分。
十位:在整个选择器中每包含一个 类选择器
、属性选择器
、或者 伪类
就在该列中加1分。
个位:在整个选择器中每包含一个 元素选择器
或 伪元素
就在该列中加1分。
注意: 通用选择器 (*), 复合选择器 (+, >, ~, ' ') 和否定伪类 (:not) 在专用性中无影响。
示例
选择器 | 千位 | 百位 | 十位 | 个位 | 合计值 |
---|---|---|---|---|---|
h1 | 0 | 0 | 0 | 1 | 0001 |
#important | 0 | 1 | 0 | 0 | 0100 |
h1 + p::first-letter | 0 | 0 | 0 | 3 | 0003 |
li > a[href*="zh-CN"] > .inline-warning | 0 | 0 | 2 | 2 | 0022 |
#important p > p > a:hover, 在一个元素的 <style>
| 特異性特異性は基本的に、セレクターがどれだけ具体的であるかを示す尺度です。つまり、 | 一致する要素の数 | です。上に示した例に示されているように、要素セレクターの特異性は非常に低いです。クラス セレクターはより具体的であり、要素セレクターよりも優れています。 ID セレクターの特異性はさらに高いため、クラス セレクターよりも優れています。セレクターの特異性の量は、千、百、十、一と考えることができる 4 つの異なる値 (またはコンポーネント) を使用して測定されます - 4 つの列 4 つの単純な数字: | 千: 追加宣言が style 属性内にある場合は 1 この列を指します (そのような宣言にはセレクターがないため、詳細度は常に 1000 です)。それ以外の場合は 0。 |
ID セレクター
の列に 1 ポイントを追加します。 🎜🎜🎜🎜10 桁: セレクター全体に クラス セレクター
、属性セレクター
、または 疑似クラス
が含まれるたびに、カラム。 🎜🎜🎜🎜一の位: セレクター全体に含まれる 要素セレクター
または 擬似要素
ごとに、この列に 1 ポイントを追加します。 🎜🎜🎜🎜注: ユニバーサル セレクター (*)、複合セレクター (+、>、~、' ')、および負の疑似クラス (:not) は、特異性には影響しません。 🎜🎜例🎜以上がCSSの構造とカスケードについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。