www.baike369.com
百科369 > CSS3教程 > CSS3匹配父元素的第N个子元素的方法

CSS3匹配父元素的第N个子元素的方法


CSS3匹配父元素的第N个子元素的方法

:nth-child(n)伪类可以选择一个属于某父元素的第N个子元素,而不管该元素的类型是什么,都能够给这个匹配的子元素设置CSS样式。

<style type="text/css">
<!--
td{font-size:12px; /* font-size属性:字体大小 */
}
table tr td:nth-child(2){
font-weight:bolder; /* font-weight属性:字体粗细 */
font-size: 24px;
color:#0000FF;      /* color属性:字体颜色 */
}
-->
</style>

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3匹配父元素的第N个子元素的方法实例-www.baike369.com</title>
<style type="text/css">
<!--
td{ font-size:12px;}
table tr td:nth-child(2){
font-weight:bolder;
font-size: 24px;
color:#0000FF;
}
-->
</style>
</head>
<body>
<table> 
<tr> 
<td>第一个</td>
<td>第二个</td> 
<td>第三个</td>
</tr> 
</table>
</body>
</html>

在这里,父元素是tr,子元素是td,:nth-child(n)伪类匹配的是第二个td元素。

Copyright© 2011-2016 www.baike369.com All Rights Reserved