极客教程CSS选择同类名的第一个
在CSS中，有时候我们需要选择同一个类名下的第一个元素进行特殊样式设置。这在实际开发中经常会遇到，比如需要给一个列表中的第一个元素添加特殊样式，或者给一个导航栏中的第一个链接添加特殊样式等。本文将详细介绍如何使用CSS选择器来实现这一功能。
1. 使用:first-child伪类选择同类名的第一个元素
:first-child 伪类可以选择同一个父元素下的第一个子元素，我们可以利用这个特性来选择同一个类名下的第一个元素。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:first-child {
color: red;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</body>
</html>
Output:
在上面的示例中，我们给类名为 item 的元素添加了 :first-child 伪类选择器，然后设置了颜色为红色。这样就可以实现选择同类名的第一个元素并设置特殊样式的效果。
2. 使用:nth-of-type选择同类名的第一个元素
除了使用 :first-child 伪类外，我们还可以使用 :nth-of-type 选择器来选择同一个父元素下的第一个指定类型的子元素。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:nth-of-type(1) {
font-weight: bold;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</body>
</html>
Output:
在上面的示例中，我们使用 :nth-of-type(1) 选择器选择了同类名为 item 的元素中的第一个元素，并设置了字体加粗的样式。
3. 使用:first-of-type选择同类名的第一个元素
除了使用 :first-child 和 :nth-of-type 伪类外，我们还可以使用 :first-of-type 选择器来选择同一个父元素下的第一个指定类型的子元素。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:first-of-type {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</body>
</html>
Output:
在上面的示例中，我们使用 :first-of-type 选择器选择了同类名为 item 的元素中的第一个元素，并设置了背景颜色为浅蓝色。
4. 使用JavaScript动态添加类名选择同类名的第一个元素
有时候我们需要根据用户的操作或者其他条件来动态选择同类名的第一个元素进行样式设置，这时候可以使用JavaScript来实现。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:first-child {
color: red;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<button onclick="addSpecialStyle()">Add Special Style</button>
<script>
function addSpecialStyle() {
document.querySelector('.item:first-child').style.fontWeight = 'bold';
}
</script>
</body>
</html>
Output:
在上面的示例中，我们通过JavaScript动态添加了一个特殊样式，当用户点击按钮时，会给同类名为 item 的第一个元素添加加粗样式。
5. 使用:not选择同类名的第一个元素之外的元素
有时候我们需要选择同类名的第一个元素之外的其他元素进行样式设置，这时候可以使用 :not 选择器来实现。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:not(:first-child) {
color: blue;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</body>
</html>
Output:
在上面的示例中，我们使用 :not(:first-child) 选择器选择了同类名为 item 的元素中除了第一个元素之外的其他元素，并设置了颜色为蓝色。
6. 使用:nth-child选择同类名的第一个元素
除了 :first-child 伪类外，我们还可以使用 :nth-child 选择器来选择同一个父元素下的第一个子元素。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:nth-child(1) {
font-style: italic;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</body>
</html>
Output:
在上面的示例中，我们使用 :nth-child(1) 选择器选择了同类名为 item 的元素中的第一个元素，并设置了字体为斜体。
7. 使用:nth-last-child选择同类名的倒数第一个元素
除了 :first-child 和 :nth-child 伪类外，我们还可以使用 :nth-last-child 选择器来选择同一个父元素下的倒数第一个子元素。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:nth-last-child(1) {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</body>
</html>
Output:
在上面的示例中，我们使用 :nth-last-child(1) 选择器选择了同类名为 item 的元素中的倒数第一个元素，并设置了文本下划线样式。
8. 使用:nth-child(n)选择同类名的第n个元素
除了选择第一个元素外，我们还可以选择同类名下的第n个元素，其中n为一个整数。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:nth-child(2) {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</body>
</html>
Output:
在上面的示例中，我们使用 :nth-child(2) 选择器选择了同类名为 item 的元素中的第二个元素，并设置了背景颜色为浅绿色。
9. 使用:nth-child(odd)选择同类名的奇数元素
除了选择指定位置的元素外，我们还可以选择同类名下的奇数位置的元素，可以使用 :nth-child(odd) 选择器来实现。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:nth-child(odd) {
color: purple;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</body>
</html>
Output:
在上面的示例中，我们使用 :nth-child(odd) 选择器选择了同类名为 item 的元素中的奇数位置的元素，并设置了颜色为紫色。
10. 使用:nth-child(even)选择同类名的偶数元素
与选择奇数位置的元素类似，我们也可以选择同类名下的偶数位置的元素，可以使用 :nth-child(even) 选择器来实现。下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择同类名的第一个元素</title>
<style>
.item:nth-child(even) {
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</body>
</html>
Output:
在上面的示例中，我们使用 :nth-child(even) 选择器选择了同类名为 item 的元素中的偶数位置的元素，并设置了背景颜色为浅黄色。