スタイルの優先度

Posted on 6月 25, 2010

0


  • スタイルの詳細度

    • IDセレクタ>クラスセレクタ・属性セレクタ>タイプセレクタ>ユニバーサルセレクタ


* {color: #ffffff;}
div {color: #fffff0;}
div p {color: #ffff00;}
div.class {color: #fff000;}
div.#id {color: #ff0000;}

  • スタイルの読み込み

    • 詳細度が同じスタイルの場合には、後のスタイルが適用される
    • link要素や@importでCSSファイルを読み込んだ時にも、後に読み込まれたファイルが優先される(上書きされる)


/*CSSファイルの中での順序*/
div {color: #ffffff;}
div {color: #000000;} /*こちらが優先される*/

/*link要素で読み込むCSSファイル*/
<link rel="stylesheet" type="text/css" href="css/ue.css">
<link rel="stylesheet" type="text/css" href="css/naka.css">
<link rel="stylesheet" type="text/css" href="css/sita.css">

/*@importで読み込むCSSファイル*/
@import "css/ue.css"; /*優先順位3位*/
@import "css/naka.css"; /*優先順位2位*/
@import "css/sita.css"; /*優先順位1位*/

広告
Posted in: CSS基礎