CSS后代选择器

nth-child nth-of-type

by xu xiaofei

HTML

<body>
    <div class='main'>
	
        <ul class='nav'>
            <div>home</div>
            <li>nav1</li>
            <li>nav2</li>
            <li>nav3</li>
            <li>nav4</li>
            <li>nav5</li>
            <p>login</p>
        </ul>
		
        <ul class='sidebar'>
            <li>sidebar1</li>
            <li>sidebar2</li>
            <li>sidebar3</li>
            <li>sidebar4</li>
            <li>sidebar5</li>
        </ul>
		
		<ul>
            <p>only p</p>
        </ul>
    </div>
</body>

CSS

/* 涉及到type的索引、first、last、only，都是按照该元素类型的顺序来定位
   无type的child选择则以全部子元素的顺序来定位
   
*/


/* nth-child(an+b)选择父元素下、第an+b个且为li的子元素 ,因此nav2和nav4的background为红色*/

.nav li:nth-child(2n+1) {
    height: 100px;
    background: -webkit-linear-gradient(right, red, white);
}


/* nth-of-type(an+b)选择父元素的li元素中，第an+b个li元素，
与nth-child的区别在于type的索引值只考虑此类型元素，不考虑其它元素
nth-child则按照全部元素来索引*/

ul li:nth-of-type(2n+1) {
    background: tomato;
}

.sidebar li:nth-child(2n+1) {
    color: #fff;
}

ul li:first-of-type {}


/* nav5的父元素的最后一个子元素不是li，所以nav5的border不是绿色 
	sidebar5的父元素的最后一个子元素是li，所以sidebar的border是绿色
*/

ul li:last-child {
    border: 1px solid green;
}

ul p:only-of-type {
    color: yellow;
}


/* login的父元素并非只有p一个子元素，因此login的background不为黑色 */

ul p:only-child {
    background: #aaa;
}