css3 :nth-child和:nth-of-type 选择器
2016-07-27 本文已影响0人
jaminwong
:nth-child和:nth-of-type都是CSS3中的伪类选择器，两者作用类似,但仍有部分区别.
举个例子：
对于p:nth-child(3) 和 p:nth-of-type(3)，被选中的元素需满足的条件条分别为：
***p:nth-child(3) ***：该元素是父元素的第三个子元素，且元素类型为p。
***p:nth-of-type(3) ***：该元素是父元素的第三个类型为p的子元素。
一个简单的应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格隔行变色或隔列变色</title>
<style>
body {
padding: 0;
margin: 0;
font: normal 12px/24px "\5FAE\8F6F\96C5\9ED1";
color: #444;
}
table {
width: 500px;
border: 0;
margin: 100px auto 0;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
}
table th {
background: #0090D7;
font-weight: normal;
line-height: 30px;
font-size: 14px;
color: #FFF;
}
table tr:nth-child(odd) {
background: #F4F4F4;
}
table td:nth-child(even) {
color: #C00;
}
table tr:nth-child(5) {
background: #73B1E0;
color: #FFF;
}
table tr:hover {
background: #73B1E0;
color: #FFF;
}
table td,
table th {
border: 1px solid #EEE;
}
</style>
</head>
<body>
<table>
<tr>
<th>xHTML+CSS</th>
<th>HTML5+CSS3</th>
<th>Javascript</th>
<th>jQurey</th>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
<tr>
<td>xHTML+CSS</td>
<td>HTML5+CSS3</td>
<td>Javascript</td>
<td>jQurey</td>
</tr>
</table>
</body>
</html>
