同じ種類のプロパティを同時に指定した場合で、それぞれの値が異なる場合には、競合が発生してしまうことになります。

例えば上記の場合、p要素に対して color: red と color: green を同時に指定しているので、色の指定が競合してしまいます。

このような競合が発生した場合に、どちらの指定内容が選択（適用）されるのかは、以下の項目で説明する優先順位によって決められます。

スタイルシートには、制作者によって設定された「制作者スタイル」、閲覧者によって設定された「ユーザースタイル」、ブラウザ標準の「ブラウザスタイル」があります。

この設定者の違いによる優先順位は次のようになります。

1. 制作者スタイル
制作者が、自分のサイトをデザインする際に設定するスタイルシートです。他のスタイルよりも優先されます。

2. ユーザースタイル
閲覧者が、自分が見やすいように設定したスタイルシートです（ブラウザで設定可能）。!importantを指定することにより、「制作者スタイル」よりも優先させることが可能です。

3. ブラウザスタイル
ブラウザに標準設定されたスタイルです。「制作者スタイル」や「ユーザースタイル」が設定されていない場合は、このスタイルが適用されます。（例えば、h1要素内のテキストを大きめのサイズで表示したり、strong要素内のテキストを太字で表示したり、などです。）

例えば、「ユーザースタイル」と「制作者スタイル」で上記のように指定されていた場合、「制作者スタイル」の指定内容が優先されるのでp要素内の文字は赤（red）で表示されます。

セレクタの種類による優先順位は次のようになります。（より限定的な部分で指定されたスタイルが優先されます）

1. ID
ひとつの要素に対する指定。

2. クラス名
グループ単位の指定。

3. 要素名
要素の種類単位の指定。

4. *（全称セレクタ）
全ての要素に指定。

上記の例では、p要素に対して3種類のセレクタで文字色を指定しています。

クラス名やIDの無いp要素は「青 blue」になりますが、クラス名を加えたp要素は「緑 green」になります（クラスの指定が優先されるので）。更にIDを加えたp要素では、クラスの指定よりもIDの指定が優先されるので、その内容は「赤 red」で表示されます。

設定場所による優先順位は、より後の方に出てきたスタイル指定が優先されます。

例えば、外部スタイルシートの指定、head要素内の指定、要素に直接指定、これらを同時に指定した場合、優先順位は以下のようになります。

上記のように記述した場合、優先順位は次のようになります。

1. 要素に直接指定（color: red）

2. head内の指定（color: green）

3. 外部スタイルシートの指定（color: blue）

上記のように、link要素の記述位置を変更（style要素より後に記述）した場合、優先順位は次のようになります。

1. 外部スタイルシートの指定（color: blue）

2. head内の指定（color: green）

通常は、上記の各項目で説明したルールでスタイル指定の優先順位が決められますが、!important を指定することで優先順位を入れ替えることが可能になります。

!important が指定されたスタイルが、最優先されることになります。