css匹配子元素不匹配子子元素
2018-11-01 來(lái)源：學(xué)做網(wǎng)站論壇
我們?cè)谧约鹤鼍W(wǎng)站時(shí)，為了達(dá)到自己需要的頁(yè)面效果，需要對(duì)網(wǎng)頁(yè)上不同的元素進(jìn)行不同樣式CSS的控制。
例如我們做了一個(gè)視頻類網(wǎng)站，網(wǎng)站里面有很多的分類，有一級(jí)分類和子分類。我們?cè)诰W(wǎng)站首頁(yè)將所有的一級(jí)分類和子分類全部調(diào)用出來(lái)。
調(diào)用代碼：
<?php wp_list_categories('title_li=&orderby=name&show_count=0&depth=3'); ?>
效果如下圖：
為了讓一級(jí)分類的文字與子分類的文字顯示不同的樣式，我們需要使用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}
通過(guò)以上的CSS寫法，我們就可以單獨(dú)的控制一級(jí)分類子元素的樣式，而子子元素不受任何影響。
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
最新資訊
熱門推薦