在 CSS 中,:first-child 伪类表示一个元素是其父元素的第一个子元素,可以使用它来选择页面上的第一个元素,并对其应用特定的样式。
下面是一个示例 HTML5 页面,其中包含了一个使用 :first-child 伪类的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using :first-child Pseudo-class in CSS</title>
<style>
/* 对页面上第一个段落应用特定的样式 */
p:first-child {
font-weight: bold; /* 加粗 */
color: blue; /* 蓝色 */
font-size: 24px; /* 字体大小 */
}
</style>
</head>
<body>
<h1>Using :first-child Pseudo-class in CSS</h1>
<p>Here is the first paragraph.</p>
<p>Here is the second paragraph.</p>
<p>Here is the third paragraph.</p>
</body>
</html>
在上面的示例中,我们使用 :first-child 伪类来选择页面上的第一个段落,并对其应用了一些特定的样式,例如加粗、蓝色和更大的字体大小。
需要注意的是,:first-child 伪类只选择作为其父元素的第一个子元素的元素,如果父元素中有其他元素在它之前出现,则不会被选择。在这个示例中,我们只选择了页面上的第一个段落,并没有选择其他的元素。
正文完