CSSの構造とカスケードについて詳しく解説-jsチュートリアル-php.cn

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) 在专用性中无影响。

示例

特異性特異性は基本的に、セレクターがどれだけ具体的であるかを示す尺度です。つまり、です。上に示した例に示されているように、要素セレクターの特異性は非常に低いです。クラスセレクターはより具体的であり、要素セレクターよりも優れています。 ID セレクターの特異性はさらに高いため、クラスセレクターよりも優れています。セレクターの特異性の量は、千、百、十、一と考えることができる 4 つの異なる値 (またはコンポーネント) を使用して測定されます - 4 つの列 4 つの単純な数字: 千: 追加宣言が style 属性内にある場合は 1 この列を指します (そのような宣言にはセレクターがないため、詳細度は常に 1000 です)。それ以外の場合は 0。

选择器	千位	百位	十位	个位	合计值
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 セレクター の列に 1 ポイントを追加します。 🎜🎜🎜🎜10 桁: セレクター全体に クラスセレクター、属性セレクター、または 疑似クラスが含まれるたびに、カラム。 🎜🎜🎜🎜一の位: セレクター全体に含まれる 要素セレクター または 擬似要素 ごとに、この列に 1 ポイントを追加します。 🎜🎜🎜🎜注: ユニバーサルセレクター (*)、複合セレクター (+、>、~、' ')、および負の疑似クラス (:not) は、特異性には影響しません。 🎜🎜例🎜🎜🎜h1🎜🎜0🎜🎜0🎜🎜0🎜🎜1🎜🎜0001 🎜 🎜🎜#重要🎜🎜0🎜🎜1🎜🎜0🎜🎜0🎜🎜0100🎜🎜🎜h1 + p::first-letter🎜🎜0🎜🎜0🎜🎜0🎜 3🎜 🎜 0003🎜🎜🎜li > a[href*="zh-CN"] > .inline-warning🎜🎜0🎜🎜2🎜2🎜🎜0022🎜🎜🎜# p > p > a:hover、要素の <style> プロパティ内

注: 複数のセレクターが同じ重要性と特異性を持つ場合、どのセレクターが選択されるかは、ソースの順序によって異なります。

ソースの順序

複数の競合するセレクターが同じ重要性と特異性を持っている場合、3 番目の要素がどのルールが優先するかを決定するのに役立ちます。つまり、後のルールが前のルールよりも優先されます。

継承

CSS 継承は、すべての情報を取得し、要素にどのようなスタイルが適用されているかを理解するために調べる必要がある最後の部分です。その考え方は、要素に適用される一部の属性値はその要素の子要素に継承され、一部は継承されないということです。

どの属性がデフォルトで継承され、どの属性が継承されないかは、ほぼ常識と一致しています。確実に知りたい場合は、CSS リファレンスを参照してください。各プロパティページには、要素が継承されているかどうかなど、要素に関するさまざまな詳細を含む概要表が表示されます。

継承プロパティは CSS の最も基本的な内容の 1 つであり、通常は特別に考慮されませんが、覚えておく必要があります:

ほとんどのボックスモデルプロパティ (境界線など) は継承されません。
継承には特殊性がなく、0,0,0,0 未満です * {color: red;} など

コントロール継承

CSS は、次の 3 つの特別な一般属性値を提供します継承の処理:

inherit: この値は、選択した要素に適用される属性値をその親要素と同じに設定します。
initial : この値は、選択した要素に適用される属性値を、ブラウザのデフォルトのスタイルシートでその要素に設定されているのと同じ値に設定します。ブラウザのデフォルトスタイルシートに値が設定されておらず、プロパティが自然に継承される場合、プロパティ値は inherit に設定されます。 inherit。
unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。

总结

层叠样式表这个名字很贴切。 CSS所采用的方法就是让样式层叠在一起，这是通过结合继承和特殊性做到的•。CSS2.1 的层叠规则相当简单。

找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。
按显式权重对应用到该元素的所有声明排序。标志 !important 的规则的权重要高于没有 !important 标志的规则。按来源对应用到给定元素的所有声明排序。共有3种来源：创作人员、读者和用户代理。正常情况下，创作人员的样式要胜过读者的样式。有 !important 标志的读者样式要强于所有其他样式，这包括有 !important
unset: この値はプロパティを自然な値にリセットします。つまり、プロパティが自然に継承される場合は inherit のように動作し、そうでない場合は initial のように動作します。
概要
Cascading Style Sheets という名前は適切です。 CSS が採用するアプローチはスタイルをカスケードすることであり、これは継承と特異性の組み合わせによって行われます。 CSS2.1 のカスケードルールは非常に単純です。

指定された要素に一致するセレクターを含む関連ルールをすべて検索します。

この要素に適用されるすべての宣言を明示的な重みで並べ替えます。 ! important フラグのあるルールは、! important フラグのないルールよりも重みが高くなります。指定された要素に適用されるすべての宣言をソースごとに並べ替えます。ソースには、作成者、読者、ユーザーエージェントの 3 つがあります。通常、作成者のスタイルは読者のスタイルに優先します。 ! important フラグを持つリーダースタイルは、! important フラグを持つ作成者スタイルを含む他のすべてのスタイルよりも強力です。作成者スタイルと読者スタイルはどちらも、ユーザーエージェントのデフォルトスタイルより強力です。