CSS选择第一个img元素|极客教程

CSS选择第一个img元素

在网页开发中，我们经常需要通过CSS来对页面中的元素进行样式的设置。有时候，我们需要对页面中的第一个img元素进行特殊样式的设置，这时就需要用到CSS中的选择器来选中第一个img元素。

通过:first-child伪类选择第一个img元素

在CSS中，我们可以使用:first-child伪类来选中父元素的第一个子元素。通过这个伪类，我们可以选中页面中的第一个img元素，并对其进行样式的设置。

下面是一个示例，演示如何使用:first-child伪类来选择第一个img元素并对其设置不同的样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择第一个img元素</title>
<style>
    img:first-child {
        border: 2px solid red;
        border-radius: 10px;
    }
</style>
</head>
<body>
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
</body>
</html>

在上面的示例中，我们使用:first-child伪类来选中页面中的第一个img元素，并为其设置了红色的边框和圆角。