CSSの優先順位

<style type="text/css">
  /* ----- 同一セレクタ内に同じプロパティを複数定義 ----- */
  .cls11 {
     color: red;
     color: blue;           /* ← 後に書いたこれが優先 */
  }
  /* ----- 別セレクタ内に同じプロパティを複数定義 ----- */
  .cls12 { color: red; }
  .cls12 { color: green; } /* ← 後に書いたこれが優先 */

<p class="cls11">あいうえお</p>
<p class="cls12">あいうえお</p>

<style type="text/css">
  #id21  { color: red;   }
  .cls21 { color: blue;  }
  p      { color: green; }
</style>

<p>あいうえお</p>                          <!-- 要素のみ         → green          -->
<p id="id21">かきくけこ</p>               <!-- ID指定           → ID優先 red     -->
<p class="cls21">さしすせそ</p>           <!-- クラス指定       → クラス優先 blue -->
<p class="cls21" id="id21">たちつてと</p> <!-- IDとクラスを指定 → ID優先 red      -->
<p id="id21" class="cls21">なにぬねの</p> <!-- 逆にしていしても → ID優先 red      -->

<style type="text/css">
  #id31  { color: red; }
</style>

<p id="id31">あいうえお</p>                       <!-- IDに指定されたスタイルが有効 → red -->
<p id="id31" style="color:blue">かきくけこ</p> <!-- 直接記述されたスタイルが有効 → blue -->

<style type="text/css">
  .cls41 p            { color: red;   }  /* (1) */
  .cls41 p[lang="ja"] { color: green; }  /* (2) */
  .cls41              { color: blue;  }  /* (3) */
</style>

<div class="cls41">
  <p>あいうえお</p>              <!-- 上記(1)が適用される → red   -->
  <p lang="ja">あいうえお</p>    <!-- 上記(2)が適用される → green -->
  <div>かきくけこ</div>      <!-- 上記(3)が適用される → blue  -->
</div>

<style type="text/css">
  #id51  { color: red;   }
  .cls51 { color: blue !important; }   /* ← !important が最優先 */
</style>

<p class="cls51" id="id51" style="color:green">あいうえお</p>