CSSの優先度とちょっと便利な指定方法について

CSSの優先度

CSSの優先ルールとは1000,100,10,1の位に分けて以下のルールに従って点数を足し算して点数が一番高いセレクタのスタイルが優先的に効くというものです。!importantとつけたセレクタはどれよりも優先度が高くなります

以下が優先度と点ですが、これらの数字は繰り上がりません。

!important：最重要
インラインスタイル：1000に加算
id：100に加算
クラス、属性、擬似クラス：10に加算
要素、擬似要素：1に加算

優先度の例：

* {　0.0.0.0
li {　0.0.0.1
ul li {　0.0.0.2
section + p {　0.0.1.1
section ul li.current {　0.0.1.3
p.name.color {　0.0.2.1
#wrap {　0.1.0.0
style="font-weight:bold"　1.0.0.0

ちょっと特殊なスタイルの効かせ方

直属の子要素だけ

>を使用すると直属の子要素を選択することができます。

.parent > p

<div class="parent">
  <div>
    <p>スタイルが効く</p>
  </div>
  <p>こっちには効かない</p>
</div>

隣接する次の要素に

+を使うことで隣接する兄弟要素に効かせることができます。

article h1 + p

<article>
  <h1>見出し</h1>
  <p>ここにスタイルが効きます。</p>
  <p>ここを例にするとarticle内のh1のすぐ隣にいるp要素にスタイルが効きます。
  隣の隣のpや下階層のpには効きません。</p>
</article>

後に続く要素全て

~を使用すると後に続く全ての要素を選択することができます。
例えばブログなどの記事一覧ページの記事ごとのセクションにmargin-bottomをかけたとすると一番下のエントリに不要なmargin-bottomがかかってしまいます。
そんな時は~で１番目の記事をスキップして2番目のセクションからmargin-topをかけることで無駄のないスマートなmarginをかけることができます。

section ~ section { margin-top: 30px; }

<section>
  <h1>見出し<h1>
  <p>内容内容内容内容内容内容</p>
</section>

マージントップが入る
<section>
  <h1>見出し<h1>
  <p>内容内容内容内容内容内容</p>
</section>

マージントップが入る
<section>
  <h1>見出し<h1>
  <p>内容内容内容内容内容内容</p>
</section>