ホームページ > 記事 > ウェブフロントエンド > ナビゲーション CSS の問題_html/css_WEB-ITnose
ナビゲーション CSS の問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:43:25941ブラウズ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">#nav {list-style-type: none;}#nav li {float: left;}#nav li a {font-size: 14px;text-decoration: none;background-color: #FFFFCC;display: block;width: 100px;margin-right: 4px;text-align: center;padding-top: 8px;padding-bottom: 8px;}#nav li a:hover {background-color: #FF0000;}#nav li a#current {background-color: #00FF00;}</style></head><body><ul id="nav"> <li><a id="current" href="#">百度</a></li> <li><a href="#">百度</a></li> <li><a href="#">新浪</a></li></ul></body></html> このようなナビゲーションがあるのに、なぜ #nav li a#current {background-color: #00FF00;} を #current {background-color: #00FF00;} に書き換えて効果がなくなったのでしょうか?
http://www.w3cn.org/article/translate/2005/104.html ここには CSS テクニックがあり、以下について説明しています
4. クラスと ID の前に要素制限を解除します
クラスを定義するために記述するときelement または id の場合は、前の要素修飾を省略できます。ID はページ内で一意であり、 class はページ内で複数回使用できるためです。要素を修飾することは意味がありません。例:
div#content { /* 宣言 */ }
fieldset.details { /* 宣言 */ }
は次のように記述できます
#content { /* 宣言 */ }
.details { /* 宣言 * / }
これにより、いくつかのバイトが節約されます。
#nav li a#current {background-color: #00FF00;} を #current {background-color: #00FF00;} に書き換えて効果がなくなったのはなぜですか?
ディスカッションへの返信(解決策)
デバッグ後の結果は、
書き込み方法が #current {background-color: #00FF00;} の場合、
#nav li a {font-size: 14px;text - 装飾: なし;背景色: #FFFFCC;表示: ブロック;幅: 100px;margin-right: 4px;text-align: center;padding-top: 8px;padding-bottom: 8px;}
背景 - style color 属性は、#current スタイルの属性設定をオーバーライドします。
書き込みが #nav li a#current {background-color: #00FF00;} の場合、スタイル
#nav li a#current は #nav li a スタイルの属性値をカバーします。
具体的な理由はわかりません。
マスターの返事を待っています。
ブラウザがスタイルを読み込む順序に関係している可能性があるようです。
デバッグ後の結果は、
書き込みメソッドが #current {background-color: #00FF00;} の場合、
#nav li a {font-size: 14px;text-decoration: none;background-color: # FFFFCC;display: block;width: 100px;margin-right: 4px;text-align: center;padding-top: 8px;padding-bottom: 8px;}
スタイルの背景色属性は上書きされます、#current style内部のプロパティ設定。
書き込みが #nav li a#current {background-color: #00FF00;} の場合、スタイル
#nav li a#current は #nav li a スタイルの属性値をカバーします。
具体的な理由はわかりません。
マスターの返事を待っています。
優先順位の点では、#current が最高レベルであるはずです。なぜその属性が上書きされるのでしょうか?
ブラウザで表示される順序は次のとおりです:
element.sytle{ }
#nav li a #current
#nav li a
#current
うーん。 。優先事項です、ありがとう
はい。 。優先事項です、ありがとうございます
それでは投稿を閉じてポイントを付与させていただきます...