极客教程CSS 当前元素的第一个
在CSS中，我们经常会遇到需要对当前元素的第一个子元素进行样式设置的情况。这时候，我们可以使用:first-child伪类来实现。:first-child选择器用于选取某个元素的第一个子元素，并对其应用样式。
1. 选择第一个子元素
首先，让我们来看一个简单的示例，如何使用:first-child选择器来选择第一个子元素并设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Child Example</title>
<style>
div:first-child {
color: red;
}
</style>
</head>
<body>
<div>geek-docs.com</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
在上面的示例中，我们选择了第一个<div>元素，并将其文字颜色设置为红色。运行结果如下：
可以看到，只有第一个<div>元素的文字颜色被设置为红色。
2. 选择特定类型的第一个子元素
除了选择第一个子元素外，我们还可以选择特定类型的第一个子元素。例如，我们可以选择第一个<p>元素并设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Paragraph Example</title>
<style>
p:first-child {
font-weight: bold;
}
</style>
</head>
<body>
<p>geek-docs.com</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</body>
</html>
Output:
在上面的示例中，我们选择了第一个<p>元素，并将其文字设置为粗体。
可以看到，只有第一个<p>元素的文字被设置为粗体。
3. 选择特定类的第一个子元素
除了选择特定类型的第一个子元素外，我们还可以选择特定类的第一个子元素。例如，我们可以选择第一个类为highlight的元素并设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Highlight Example</title>
<style>
.highlight:first-child {
background-color: yellow;
}
</style>
</head>
<body>
<div class="highlight">geek-docs.com</div>
<div class="highlight">Second highlight</div>
<div class="highlight">Third highlight</div>
</body>
</html>
Output:
在上面的示例中，我们选择了第一个类为highlight的元素，并将其背景颜色设置为黄色。
可以看到，只有第一个类为highlight的元素的背景颜色被设置为黄色。
4. 选择特定属性的第一个子元素
除了选择特定类的第一个子元素外，我们还可以选择具有特定属性的第一个子元素。例如，我们可以选择具有data-id属性的第一个子元素并设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Data ID Example</title>
<style>
[data-id]:first-child {
color: blue;
}
</style>
</head>
<body>
<div data-id="1">geek-docs.com</div>
<div data-id="2">Second data id</div>
<div data-id="3">Third data id</div>
</body>
</html>
Output:
在上面的示例中，我们选择了具有data-id属性的第一个子元素，并将其文字颜色设置为蓝色。
可以看到，只有具有data-id属性的第一个子元素的文字颜色被设置为蓝色。
5. 选择特定状态的第一个子元素
除了选择具有特定属性的第一个子元素外，我们还可以选择具有特定状态的第一个子元素。例如，我们可以选择处于悬停状态的第一个子元素并设置样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Hover Example</title>
<style>
div:first-child:hover {
background-color: lightgray;
}
</style>
</head>
<body>
<div>geek-docs.com</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
在上面的示例中，我们选择了处于悬停状态的第一个<div>元素，并将其背景颜色设置为浅灰色。
可以看到，只有处于悬停状态的第一个<div>元素的背景颜色被设置为浅灰色。
6. 选择特定位置的第一个子元素
除了选择特定状态的第一个子元素外，我们还可以选择特定位置的第一个子元素。例如，我们可以选择第一个子元素并设置其在页面中的位置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Position Example</title>
<style>
div:first-child {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div>geek-docs.com</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
在上面的示例中，我们选择了第一个<div>元素，并将其定位在页面的左上角。
可以看到，只有第一个<div>元素被定位在页面的左上角。
7. 选择特定状态的第一个子元素
除了选择特定位置的第一个子元素外，我们还可以选择特定状态的第一个子元素。例如，我们可以选择第一个子元素并设置其在页面中的状态：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First State Example</title>
<style>
div:first-child {
display: none;
}
</style>
</head>
<body>
<div>geek-docs.com</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
在上面的示例中，我们选择了第一个<div>元素，并将其设置为不显示。
可以看到，只有第一个<div>元素被设置为不显示。
8. 选择特定状态的第一个子元素
除了选择特定状态的第一个子元素外，我们还可以选择特定状态的第一个子元素。例如，我们可以选择第一个子元素并设置其在页面加载时自动隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Hide Example</title>
<style>
div:first-child {
display: none;
}
</style>
<script>
window.onload = function() {
document.querySelector('div:first-child').style.display = 'block';
};
</script>
</head>
<body>
<div>geek-docs.com</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
在上面的示例中，我们选择了第一个<div>元素，并将其设置为不显示，然后在页面加载完成后通过JavaScript将其显示出来。
可以看到，页面加载完成后第一个<div>元素被显示出来。
9. 选择特定状态的第一个子元素
除了选择特定状态的第一个子元素外，我们还可以选择特定状态的第一个子元素。例如，我们可以选择第一个子元素并设置其在页面中的状态：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First State Example</title>
<style>
div:first-child {
opacity: 0.5;
}
</style>
</head>
<body>
<div>geek-docs.com</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
在上面的示例中，我们选择了第一个<div>元素，并将其透明度设置为0.5。
可以看到，只有第一个<div>元素的透明度被设置为0.5。
10. 选择特定状态的第一个子元素
除了选择特定状态的第一个子元素外，我们还可以选择特定状态的第一个子元素。例如，我们可以选择第一个子元素并设置其在页面中的状态：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First State Example</title>
<style>
div:first-child {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div>geek-docs.com</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
Output:
在上面的示例中，我们选择了第一个<div>元素，并将其旋转45度。
可以看到，只有第一个<div>元素被旋转了45度。
通过以上示例，我们可以看到如何使用:first-child伪类来选择当前元素的第一个子元素，并对其应用样式。这种方法可以帮助我们更灵活地控制页面元素的样式，使页面更加美观和易读。