您可以使用 :first-child 伪类来选择元素的第一个子元素
注意：在 IE8 的之前版本必须声明 <!DOCTYPE> ，这样 :first-child 才能生效。
匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：
实例
<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>我是一个强壮的男人.</p>
<p>我是一个强壮的男人.</p>
</body>
</html>
尝试一下 »
匹配所有 <p> 元素中的第一个 <i> 元素
在下面的例子中，选择相匹配的所有 <p> 元素的第一个 <i> 元素：
实例
<html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
</body>
</html>
尝试一下 »
匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
实例
<html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
</body>
</html>
尝试一下 » |
发表于 2024-5-6 09:57
|