個性原創,打造品牌

拒絕模仿抄襲、拒絕模板建站;
多位資深網頁設計師同時設計,讓您優中選優;
網站獨一無二,品牌輕易提升...

了解詳情 >

代碼規范,國際標準

后臺php+mysql動態管理,功能強大,千萬級數據;
前臺div+css生成靜態,代碼精簡,訪問速度快,
符合w3c國際標準,兼容ie/火狐/蘋果等任意瀏覽器...

了解詳情 >

細微高效,全程無憂

域名一個,主機一臺;
主機BGP多線路,5G存儲空間,流量不限;
新聞錄入、圖片處理、數據備份、安全監測、網站升級...

了解詳情 >

移動時代,機不可失

全新視覺、創新操作;
跨平臺兼容,微信無縫對接;
不容錯過的手機網絡商機,不能錯過的手機網站時代...

了解詳情 >

搜索領先,鎖定訪客

在主流搜索引擎的搜索結果中,
網站的名稱,排在第一頁的第一名,
網站其他相關的3-5個關鍵詞,排在第一頁...

了解詳情 >

營銷利器,決勝千里

全國統一呼叫,品牌企業的象標志。
中國電信4008/4009、中國聯通4000/4006,號碼任選;
通話資費預存...

了解詳情 >
以“信”為主的服務理念,“源”為標桿的服務特點351532641點擊咨詢010-86203368聯系電話
CSS問題設計問題程序問題優化問題

CSS之nth-child用法

發布時間:2012-11-29      瀏覽次數:741

當我想要完美的使用:nth-child或者:nth-of-type的時候有點兒頭暈。你越理解它們,就能寫出越好的CSS規則!

在這些簡單的”秘方”(實際上是表達式)中我將重復的使用一個簡單的列表并隨即選擇數字。但是很明顯很容易改變它們以獲得類似的選擇器。

只選擇第五個元素


li:nth-child(5){
color: green;
}

要選擇第一個元素,你可以使用:first-child,或者我相信你也可以改下上面的例子來實現。

選擇除了前面的五個之外的所有元素


li:nth-child(n+6){
color: green;
}

如果有超過10個元素,它將會選中超過5個。

只選擇前面的5個


li:nth-child(-n+5){
color: green;
}

從開始的那個,選擇每第四個


li:nth-child(4n-7) {
/* or 4n+1 */
color: green;
}

選擇奇數或者偶數


li:nth-child(odd){
color: green;
}


li:nth-child(even){
color: green;
}

當然這里也有另外兩種實現,你懂的——神飛

選擇最后一個元素

選擇倒數第二個



li:nth-last-child(2){
color: green;
}


從這個例子可看出,上面那個例子也有第二種實現方法。

瀏覽器支持

有趣的是,:first-child 和:last-child被IE 7支持,但是知道IE9才支持剩下的選擇器。如果你擔心IE,可以使用Selectivizr。如果你瀏覽器兼容性對你很重要,請關注When can I use…

嗯,使用CSS3選擇器是件很有趣的事情,像做簡單的數學題一樣。


信源創想工作室推薦,網址為http://www.ryxdyi.tw

上一篇:比較全的CSS重設(reset)方法總結
下一篇:HTML5和css3實例:制作HTML5驗證的網頁表單

Copyright©2016  xinycx.com  All Rights Reserved  北京信源創想科技有限公司  備案號:京ICP備17071760號
地址:北京市海淀區閔莊路門頭馨村北二區33號樓3單元102室  電話:010-86203368  

北京網站建設 北京網站制作 信源創想 品牌網站建設 企業網站建設 網站設計 APP開發 微信開發 前端切圖 DIV+CSS html5切圖 APP切圖

海南七星彩玩法