CSSの構造とカスケードについて詳しく解説

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

示例