元素的某个子元素添加一些样式

在学习过程中遇到列表的排版的问题，为了使之更美观，有时我们需要对元素的某个子元素添加一些样式。下面的内容在chrome、firefox、、IE9以及IE9以上版本测试。

1、CSS :first-child ，向元素的第一个子元素添加属性，所有主流浏览器都支持 :first-child，要注意一点，为了保证 :first-child 在 IE 中正常工作，必须声明 <!DOCTYPE>。

如下，我添加了margin-left:0px;，这样看起来两边就对齐了：

<div class="ad"><img src="images/ad.jpg" /></div>
        <ul class="list">
            <li><img src="images/img1.png" /></li>
                <li><img src="images/img2.png" /></li>
                <li><img src="images/img3.png" /></li>
            </ul>

CSS:

.ad{ width:100%; height:90px; margin-bottom:30px;}

.list{ min-height:86px;}

.list li{ 
width:386px;
height:86px;
float:left;
margin-left:20px;
overflow:hidden;
}

.list li:first-child{
margin-left:0px;
}

.list li img{ width:100%; height:100%;}

2、:last-child，是CSS3的属性，元素的最后一个子元素，举个例子：

ul li:last-child{ color:red}

意思是元素ul下的最后一个子元素li的字体为红色。

例如：

<ul class="lastul">
            <li>子元素一</li>
                <li>子元素二</li>
                <li>子元素三</li>
                <li>子元素四</li>
                <li>子元素五</li>
                <li>子元素六</li>
                <li>子元素七</li>
                <li>子元素八</li>
                <li>子元素九</li>
                <li>子元素十</li>
            </ul>

CSS：

.lastul li{ height:35px; line-height:35px; text-align:left;}
.lastul li:last-child{ color:red;}   //最后一个子元素字体为红色

有时我们也需要改变元素的中间的子元素属性

3、:nth-child()，是CSS3的属性，所有主流浏览器均支持 :nth-last-child() 选，除了 IE8 及更早的版本。举个例子说明它的使用方法，例如：

用上面2的例子，增加一行css:

.lastul li:nth-child(3){ background-color:green; color:#fff;} //第三个子元素的背景变为绿色，字体颜色变为白色

如图：

如果，你把括号里面的3变为（3n），效果入下：

再看括号里面的内容变为（3n+1）,效果如下：

以此类推，可以选择自己想要修改的子元素的属性。

4、还有一种选择方法是奇数、偶数选择发，看例子：

.lastul li:nth-child(odd){ background-color:green; color:#fff;}  /*奇数*/
.lastul li:nth-child(even){ background-color:red; color:#fff;} /*偶数*/

5、:nth-last-child,也是CSS3的属性，所有主流浏览器均支持 :nth-last-child() 选，除了 IE8 及更早的版本。我们依然用例子说明它的使用方法：

.lastul li:nth-last-child(4){ background-color:green; color:#fff;}，效果如图：

也可以同3一样，把括号里面的数字改变，（4n）或者（4n+1），效果如图：