[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

CSS をコーディングしていると、同じプロパティに異なる値が指定されていたりします。

そのような場合、CSS スタイルの優先順位が適用される。

CSSの優先順位は、

  • CSSの記述方法
  • セレクタの種類
  • CSSの記述する順番

によって決定される。

CSSの適用方法によって決まる優先順位

HTMLファイルに、CSSを適用させる方法は、

  1. 外部参照
  2. 内部参照
  3. インライン

の3種類ある。

これらによって決まるCSSの優先順位は、

インライン > 内部参照 > 外部参照

となる。

・・・
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
body { background-color: white; }            内部参照
</style>
</head>
<body style="background-color: black;">   インライン
<h1>Hello!!</h1>

</body>
</html>

外部参照:外部ファイルのCSSファイルを読み込む。

上記のファイルの場合、インラインの指定が優先され、body 要素の背景色は、黒となる。

セレクタの種類によって決まるCSSの優先順位

id セレクタや class セレクタなどの具体的、局所的セレクタが、優先される。

id セレクタ > class セレクタ > タイプセレクタ > 全称セレクタ

要素を特定した id セレクタ、class セレクタは、要素を特定しない id セレクタ、class セレクタよりも優先される。

CSSの記述の順番によって決まるCSSの優先順位

CSSの記述する順番が、後の方、ファイル内では、記述が下の方が、優先されて、CSSが適用される。

 

例外的に、[!important] を付けてスタイル指定すると、最優先される。

複雑で、どのCSSの指定が適用されているのか、わからないような場合に、最終手段として用いられる。

ただし、多用してはならない。

詳細度

これら、CSSの優先順位の規則を組み合わせの優先度。

詳しくは、下記の記事を。

詳細度 (スタイルの優先順位) | CSS解説 cssの詳細度・優先度を理解し使いこなすために必要なたった1つのこと – Qiita エンジニアはもう一度CSSとちゃんと向き合ってみよう – 詳細度編 – Qiita

オススメ書籍

 

 

[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。