怎麼樣使用divcss子選擇器呢

大家知道怎麼樣使用divcss子選擇器嗎?下面我們就給大家詳細介紹一下吧!CSS初學者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的class定義。我們來看下面這段代碼：

＜div id="subnav＞"

＜ul＞ 

＜li class="subnavitem＞" ＜a href=# class="subnavitem＞"Item 1＜/a＞＜/li＞ 

＜li class="subnavitemselected＞" ＜a href=# class="subnavitemselected＞" Item 1＜/a＞ ＜/li＞
＜li class="subnavitem＞" ＜a href=# class="subnavitem＞" Item 1＜/a＞ ＜/li＞

＜/ul

＜/div＞

這段代碼的CSS定義是：

div#subnav ul { /* Some styling */ }

div#subnav ul li.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitemselected { /* Some styling */ }

div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代碼

div#subnav ul { /* Some styling */ }

div#subnav ul li.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitemselected { /* Some styling */ }

div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

樣式定義是：

#subnav { /* Some styling */ }

#subnav li { /* Some styling */ }

#subnav a { /* Some styling */ }

#subnav .sel { /* Some styling */ }

#subnav .sel a { /* Some styling */ }

相信大家已經學會怎麼樣使用divcss子選擇器了吧!感謝大家對我們網站的支持!

相關推薦：

CSS網頁制作技巧介紹