1. 匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：
<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head> <body>
<p>some text</p>
<p>some text</p>
</body>
</html>
2.匹配所有 <p> 元素中的第一个 <i> 元素
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head> <body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
3.匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head> <body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>