Changes between Version 7 and Version 8 of pne-xhtmlcss/tips

Show
Ignore:
Author:
takai (IP: 163.136.21.247)
Timestamp:
07/14/08 19:58:13 (9 years ago)
Comment:

スタイル指定の優先度について記述

Legend:

Unmodified
Added
Removed
Modified
  • pne-xhtmlcss/tips

    v7 v8  
    186186OpenPNE2.12では、いくつかのパーツとしてクラス名を付けています。 
    187187パーツの種類については、[wiki:pne-xhtmlcss/parts パーツリスト]をご覧ください。 
     188 
     189=== カスタムCSSでのスタイル指定を優先させる === 
     190既に記述されているスタイル指定と、カスタムCSSで追加したスタイル指定が衝突することがあります。 
     191例えば、 
     192{{{ 
     193.homeInfoBox .caution { 
     194        color: #ff0000; 
     195} 
     196}}} 
     197と既に記述されているとき、カスタムCSSに、 
     198{{{ 
     199.caution { 
     200        color: #0000ff; 
     201} 
     202}}} 
     203と記述した場合、.caution にどのスタイルが適用されるのかはセレクタの優先度で決められます。 
     204複数のスタイル指定が衝突したとき、 
     205 1. IDセレクタの総数(=a)が多いセレクタのスタイルを適用する 
     206 2. aが等しいときは、クラスセレクタの総数(=b)が多いセレクタのスタイルを適用する 
     207 3. aもbも等しい場合は、タイプセレクタの総数(=c)が多いセレクタのスタイルを適用する 
     208このように決められています。(厳密には少し異なります。) 
     209 
     210それぞれのセレクタは以下の通りです。 
     211{{{ 
     212#Container { スタイル宣言 } /* IDセレクタ */ 
     213.partsHeading { スタイル宣言 } /* クラスセレクタ */ 
     214body { スタイル宣言 } /* タイプセレクタ */ 
     215}}} 
     216 
     217このため、カスタムCSSにスタイル記述を行ってもスタイルが適用されないことがあります。 
     218 
     219カスタムCSSのスタイル指定を適用させるためには、以下のようにIDセレクタを付加します。 
     220{{{ 
     221#Body .caution { 
     222        color: #0000ff; 
     223} 
     224}}} 
     225IDセレクタを付加することでスタイルの優先度を高めることができます。 
     226 
     227大抵の場合、'''#Body'''をセレクタの頭に付加すればスタイルの優先度は最高になりますが、同様の理由で既存のスタイルの中に#Bodyを記述したスタイルがあります。 
     228そのスタイルよりも優先度を上げる場合は次のようにしてください。 
     229{{{ 
     230#Body #Container .caution { 
     231        color: #0000ff; 
     232} 
     233}}} 
    188234 
    189235=== ページの構造 ===