[問題] 請問css互相干擾

看板Web_Design作者時間13年前 (2012/03/18 20:30), 編輯推噓5(5017)
留言22則, 4人參與, 最新討論串1/1
打擾了 我有一個問題不知道該如何解決 想來請教高手 我做了1個網頁,同時使用了主選單和子選單 這個網頁只有1個css樣式表 但我不知道怎麼設定的 主選單在按下去之後,a:visited會去抓子選單的css 怎麼都調整不好(其實我也不知道該怎麼調整) 我想請問若要像這樣在1個頁面內使用2次同樣的標籤(a:visited)時 該怎麼使用id,確保2個地方的標籤不會互相干擾? 以下是詳細的css(部份) 麻煩大家了 謝謝 /*子選單的css*/ #right a:link, a:visited, a:active{ color: #FFF; padding-top: 15px; padding-left: 15px; text-align: right; font-size: 12pt; display: block; } #right a:hover { color: #F60; } .img_left {float: left; margin-right: 4px;} .rightcontainer { 111width: 246px; background-image: url(images/right_bg.jpg); height: 500px; padding-top: 60px; background-repeat: no-repeat; } .rightcontainer ul { list-style-type: none; } /*主選單的css*/ #navcontainer ul{ } #container #linkbar #navcontainer #navlist li { float:left; list-style-type: none; width: 140px; display: block; } #container #linkbar #navcontainer #navlist a:link, a:active, a:visited { height:40px; line-height:40px; color:#FFFFFF; text-decoration:none; font-family:arial, verdana, sans-serif; font-size:14pt; } 【HTML部份】 <div id="linkbar"> <div id="navcontainer"> <ul id="navlist" class="navigation"> <li id="active"><a href="#" id="current"><em class="about_us"></em>壹</a></li> <li><a href="#"><em class="pro_rsh"></em><strong>貳</strong></a></li> <li><a href="#"><em class="procedure"></em><strong>參</strong></a></li> <li><a href="#"><em class="service"></em><strong>四</strong></a></li> </ul> </div> </div> <div id="left"> <div id="sub_left"> <h3>&nbsp;</h3> </div> <div id="sub_right"> <h3>&nbsp;</h3> </div> <div id="sub_content"> <h3>&nbsp;</h3> </div> <div id="footer"> <p>&nbsp;</p> </div> </div> <div id="right"> <div class="navcontainer"> <ul class="navlist"> <li><a href="#">一二三四</a></li> <li><a href="#">五六七八</a></li> </ul> </div> </div> -- While everyone prefers to sit next to u i chose the one on your back cause i don't want to bother but feel comfortable quiently being with u -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.57.155.24

03/18 20:36, , 1F
網址貼出來看比較快
03/18 20:36, 1F

03/18 20:37, , 2F
你還要給大家看你的html會比較清楚 應該是selector沒抓準
03/18 20:37, 2F

03/18 20:41, , 3F
還沒有網址…還在製作階段的說
03/18 20:41, 3F

03/18 20:42, , 4F
謝謝E大,我馬上貼HTML
03/18 20:42, 4F
※ 編輯: ghostfg123 來自: 61.57.155.24 (03/18 20:52)

03/18 20:46, , 5F
改#xxxx a:link ,#xxxx a:hover ...
03/18 20:46, 5F

03/18 20:46, , 6F
如果用 #xxxx a:link , a:hover 會變成#xxxx 的連結跟
03/18 20:46, 6F

03/18 20:46, , 7F
一般連結都用該個css
03/18 20:46, 7F
※ 編輯: ghostfg123 來自: 61.57.155.24 (03/18 20:53)

03/18 20:54, , 8F
是喔?!我馬上來試試!!
03/18 20:54, 8F

03/18 21:04, , 9F
我試了一下,有些改善,但還是很奇怪耶
03/18 21:04, 9F

03/18 21:04, , 10F
貼一下修正後的程式碼吧~
03/18 21:04, 10F

03/18 21:04, , 11F
現在是a:link、a:visited、a:hover、a:active全部都一
03/18 21:04, 11F

03/18 21:05, , 12F
模一樣,但按下去文字卻會向右移動一些
03/18 21:05, 12F

03/18 21:06, , 13F
(但似乎已經沒有去抓別人的a:visited了)
03/18 21:06, 13F

03/18 21:07, , 14F
而且這個文字會向右移動一些的怪現象只在IE發生
03/18 21:07, 14F

03/18 21:08, , 15F
CHROME不會…
03/18 21:08, 15F

03/18 21:08, , 16F
hover 也加 padding
03/18 21:08, 16F

03/19 01:45, , 17F
#navlist a:link, a:active{} 這種寫法的意思是抓#navlist的
03/19 01:45, 17F

03/19 01:46, , 18F
a:link 跟 整個網頁所有的a:active(包含#right的)
03/19 01:46, 18F

03/19 01:49, , 19F
#right a:link之前另外加一個a如:#right a, #right a:link
03/19 01:49, 19F

03/19 01:49, , 20F
這樣寫可以解決你的跳動問題,你的跳動問題很明顯就是因為你
03/19 01:49, 20F

03/19 01:50, , 21F
把hover跟其他類型整個當不同的東西在設定了
03/19 01:50, 21F

03/19 01:50, , 22F
另外建議妳可能要了解一下什麼時候用id什麼時候用class
03/19 01:50, 22F
文章代碼(AID): #1FPTLanz (Web_Design)