請問 CSS 關於 nth-child() 的問題

css

wcphi 2013-03-07 23:18:21 ‧ 3559 瀏覽

請教關於圖片所示的關於我們教材介紹及教材級別
項下都有個 dc-mega-icon 這個類別但是我在CSS下改
(第1列)
.white ul.mega-menu li a {float: left; display: block; color: #000; padding: 12px 38px 12px 25px; background: url(images/bg_white.png) repeat-x 100% 0; text-shadow: 1px 1px 1px #fff; text-decoration: none;}

(第2列)
.white ul.mega-menu li a.dc-mega {position: relative;}

(第3列)
.white ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; width: 27px; height: 35px; top: 7px; right: 110px; background: url(images/menubg.png) no-repeat 0 100%;}

將第三列的dc-mega-icon加上nth-child(1) 結果還是所有的項目都一樣
其他的項目也沒有改變...請問一下我是哪裡出了錯呢???

真是麻煩各位先進了...非常感謝

wcphi iT邦新手 3 級 ‧ 2013-03-08 11:12:58 檢舉

非常感謝...我的確不是很熟悉CSS
這次的癥結在於下錯位置..

ccutmis iT邦高手 2 級 ‧ 2013-03-08 14:15:22 檢舉

不客氣，
CSS沒什麼特別的，熟能生巧而已，加油!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

ccutmis

iT邦高手 2 級 ‧ 2013-03-08 09:48:05

最佳解答

CSS語法本身是有階層化、下層繼承上層的味道，建議你先把CSS基本熟練，把問題簡化自然可以找到徵結點，以下是一個簡單DEMO:

&lt;pre class="c" name="code">&lt;!doctype html>&lt;style type="text/css">
body{background:#333;}
#mega-menu{margin:0;padding:0;background:#ccc;}
#mega-menu li{background:#aaa;padding:10px;margin-top:1px;list-style-type:none;border:solid 1px #666;float:left;max-width:100px;}
#mega-menu li:nth-child(1){background:#ff0;}
#mega-menu li:nth-child(2){background:#f00;}
&lt;/style>

&lt;div id="div1">&lt;ul id="mega-menu">
&lt;li>選單一&lt;/li>
&lt;li>選單二&lt;/li>
&lt;li>選單三&lt;/li>
&lt;/ul>&lt;/div>