css匹配子元素不匹配子子元素
2018-11-01 來源：學(xué)做網(wǎng)站論壇
我們在自己做網(wǎng)站時，為了達到自己需要的頁面效果，需要對網(wǎng)頁上不同的元素進行不同樣式CSS的控制。
例如我們做了一個視頻類網(wǎng)站，網(wǎng)站里面有很多的分類，有一級分類和子分類。我們在網(wǎng)站首頁將所有的一級分類和子分類全部調(diào)用出來。
調(diào)用代碼：
<?php wp_list_categories('title_li=&orderby=name&show_count=0&depth=3'); ?>
效果如下圖：
為了讓一級分類的文字與子分類的文字顯示不同的樣式，我們需要使用css匹配子元素不匹配子子元素。寫法如下：
.binner>ul>li>a{display:inline-block;font-weight:600;color:#669900;padding-bottom:5px;}
.binner>ul>li{border-bottom:2px solid #eeeeee;padding:5px 0;}
.binner>ul>li:after{clear: both;content: ".";display: block;height: 0;font-size: 0;visibility: hidden;}
.binner>ul>li {*zoom:1;}
.binner .children{width: 660px; float: right;}
.binner .children li{display:inline-block;width:23%;margin-bottom:10px;}
.binner .children li:nth-child(4n) a{color:#FF00FF}
.binner>ul>li{border-bottom:2px solid #eeeeee;padding:5px 0;}
.binner>ul>li:after{clear: both;content: ".";display: block;height: 0;font-size: 0;visibility: hidden;}
.binner>ul>li {*zoom:1;}
.binner .children{width: 660px; float: right;}
.binner .children li{display:inline-block;width:23%;margin-bottom:10px;}
.binner .children li:nth-child(4n) a{color:#FF00FF}
通過以上的CSS寫法，我們就可以單獨的控制一級分類子元素的樣式，而子子元素不受任何影響。
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
上一篇:做網(wǎng)站要用什么軟件
最新資訊
熱門推薦