February 11, 2004CSSの適応順位??昨日に続きCSSによるデザインの話なんですが、実は新発見、スタイルは書いた順で優先順位が決まることがわかりました(知らなかったのは自分だけかもしれませんが…)。何はともあれ、以下の例文を見てください。 <style>
.div1 a {text-decoration: underline;} .div2 a {text-decoration: none;} .div3 a {text-decoration: underline;} </style> <div class="div1"><a>div1の中です。</a> <div class="div2"><a>div2の中です。</a> <div class="div3"><a>div3の中です。</a></div> </div> </div> ↓表示されるのは しかし、次のようにdiv2とdiv3のスタイルの順を入れ替えると <style>
.div1 a {text-decoration: underline;} .div3 a {text-decoration: underline;} .div2 a {text-decoration: none;} </style> <div class="div1"><a>div1の中です。</a> <div class="div2"><a>div2の中です。</a> <div class="div3"><a>div3の中です。</a></div> </div> </div> ↓表示されるのは でdiv3に適用したはずの下線が表示されません。 考察すると、スタイルシートの中であらわれた順にスタイルが上書きされているのだと考えられます。このことから考えるに、優先順位の高いスタイルほど下に書かなければならないということではないでしょうか。 コメント
O'ReillyのCascading Style Sheetからの引用ですが、 ... if two rules have exactly the same weight, origin, and specifity, then the one that occurs later in the style sheet wins out. とのことで、この例ではどの.div? aセレクタも同じspecifityなので後のモノで上書きされたということになるみたいですね(受け売りでスイマセン)。 多分、このヘンは件の書籍のChapter 2. Selectors and Structure辺りをご覧になると目から鱗なところが多いと思います。 情報ありがとうございます。 コメントする
|
検索君
スポンサード リンク
最近の記事 HDL-AAX2 シャットダウンスクリプ… 曜日を求める(8bit範囲で) Assisted GPS (A-GPS)… HDL-AAX2の修理 ExcelでMarkdownの表を編集 Rubyで確率分布の性質を求めるgem Windowsのcygwin/MSYS2… RubyでGPS姿勢推定 RubyでGPS受信機 boost::math::distrib… E-MailRelay本体更新(ver … RinRuby (Ruby gem fo… RSpecでのexample間共用のイン… 夏休みの工作: ソースコード公開 夏休みの工作: タッチセンサ GPD Pocketに増設したストレージ… GPD Pocketにストレージ増設 GPD Pocket 内蔵USBハブ基板… GPD Pocket 内蔵USBハブ基板 久しぶりの基板作成 自転車用六角穴付き特注ナット Xiaomi Mi Max (Hydro… Xiaomi Redmi Note 3 … Super Sylphide 進捗状況(… Super Sylphide 進捗状況(… かてごり~一覧 Aero & Astro (100) Computer (189) Embedded System (308) Info (14) Mountain (43) Movable Type (28) Movie & Animation (20) Music (9) Photo (47) Site Management (46) Timely (135) Tips (68) 今月かれんだ~ あ~かいぶ 最近のTrackback ダイナミックDNS 3domain.hk… @ 3年落ちのPCでまだまだがんばる日記 9X到着〜インプレ@ 艦船プラモとRCマイクロヘリが好き! USL-5P@ 谷岡のページ (PukiWiki/TrackBack 0.3) [mbed][猫カメラ]猫カメラつづき@ Embedded 脇見運転 [mbed][猫カメラ]mbed + 猫…@ Embedded 脇見運転 MT4 @ ダイナミックで動く画像リサイ…@ wed@ 私がAudionoではなくBlackfi…@ Blackfin空挺団::Blog 【Web】はぐれメタルできたよー@ I'm St'a'dying English ちっとも、作っていない@ 三D坊主 猫カメラ@ 脇見運転 To 『猫カメラ』 試作中 最近のこめんと いきなりのコメント申し訳ありません。
… by まろまろ先輩 @ GPD Pocket 内蔵USBハブ基板 音楽を読み取りする 説明して欲しいですby 榎本待子 @ iPodからPCに曲を転送 Arduino嫌いだわ。
あんなもの見…by Alice @ 僕がArduinoを使わないわけ やや遅い書き込みで失礼します。
別の機…by LOSスマホ @ Xiaomi Mi Max (Hydrogen) の MIUI8 FM Radio (stock) 日本バンド対応 >Bさま
確か当時、そこまで高くなかっ…by fenrir @ MKS Promenade-Ezy ケージ交換 お値段はおいくらでしたか?
私も曲げて…by Bさま @ MKS Promenade-Ezy ケージ交換 >forester3さん
お返事遅くな…by fenrir @ EZUSB Keilからsdccへ、EZUSB.lib等の移植 お世話になります。3年ほど前sdccの…by forester3 @ EZUSB Keilからsdccへ、EZUSB.lib等の移植 以下のものはどうですかねby て @ VBAで泣かないために >tomi9さん
コメント気づくのが遅…by fenrir @ TCM8240MD breakout (i2cで画像取得モジュール) 動作確認完了 りんく集 |