wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

CSSで > を使用するとデザインビューで正常にレンダリングされない?

自分のサイトのコンテンツ充実などに専念しています。で、ためしにCSSを以下のように書き換えました。

#contents>p { 
    line-height: 1.5em;
    margin-left: 14px;
}

すると、Expression Web のデザインビューでは正しく認識してくれないので「!?」と思っていたところ、

#contents > p { 
    line-height: 1.5em;
    margin-left: 14px;
}

と、> (不等号の小なり)の前後に半角スペースを入れると正しく認識したようです。

これまで #contents p と指定していたんですが、その中の p タグすべてに(子だけではなく孫やひ孫も全部)適用されてしまい面倒だったので、<div id="contents"> エリアの子要素の p タグのみ左マージンを適用したかったんです。はい。

ちなみに、孫要素を適用する場合は、 #contents * p  と記述すればいいみたいですね。

しかし、<div id="coentents"> の中にダイナミックWebテンプレートの編集可能な領域を設定している場合、コメント部分が子要素として認識するためダメのようです・・・orz

仕方がないので、#contents p に戻し、そのほかの孫要素については !important で乗り切ることにしました。

※この記事はSeesaaブログからの転載記事です(そのうちにブログ削除します)
http://frontpage.seesaa.net/article/196124777.html