极客教程CSS选择器选择一个元素下的多个元素
在CSS中，我们可以使用选择器来选择HTML文档中的元素，并对其应用样式。有时候我们需要选择一个元素下的多个元素，这时就需要使用一些特定的选择器来实现。本文将详细介绍如何使用CSS选择器选择一个元素下的多个元素，并提供示例代码来帮助理解。
1. 选择所有子元素
我们可以使用子选择器（child selector）来选择一个元素下的所有直接子元素。子选择器使用>符号来表示，例如parent > child。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.parent > .child {
color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child Element 1</div>
<div class="child">Child Element 2</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.parent元素下的所有.child子元素，并将它们的文字颜色设置为红色。
2. 选择所有后代元素
除了选择直接子元素，我们还可以选择一个元素下的所有后代元素。后代选择器（descendant selector）使用空格来表示，例如ancestor descendant。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.parent .child {
font-weight: bold;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Child Element 1</div>
<div>
<div class="child">Child Element 2</div>
</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.parent元素下的所有.child后代元素，并将它们的文字设置为粗体。
3. 选择相邻兄弟元素
有时候我们需要选择一个元素后面紧邻的兄弟元素，这时可以使用相邻兄弟选择器（adjacent sibling selector）。相邻兄弟选择器使用+符号来表示，例如element1 + element2。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.sibling1 + .sibling2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="sibling1">Sibling Element 1</div>
<div class="sibling2">Sibling Element 2</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.sibling1元素后面紧邻的.sibling2兄弟元素，并将其背景颜色设置为黄色。
4. 选择所有兄弟元素
除了选择相邻兄弟元素，我们还可以选择一个元素后面的所有兄弟元素。兄弟选择器（general sibling selector）使用~符号来表示，例如element1 ~ element2。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.sibling1 ~ .sibling2 {
color: blue;
}
</style>
</head>
<body>
<div class="sibling1">Sibling Element 1</div>
<div class="sibling2">Sibling Element 2</div>
<div>Another Sibling Element</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.sibling1元素后面的所有.sibling2兄弟元素，并将它们的文字颜色设置为蓝色。
5. 选择指定位置的元素
有时候我们需要选择一个元素下的第几个子元素，这时可以使用伪类选择器（pseudo-class selector）。伪类选择器使用冒号:来表示，例如:nth-child(n)。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.parent div:nth-child(2) {
font-style: italic;
}
</style>
</head>
<body>
<div class="parent">
<div>Child Element 1</div>
<div>Child Element 2</div>
<div>Child Element 3</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.parent元素下的第二个div子元素，并将其文字设置为斜体。
6. 选择指定类型的元素
除了选择指定位置的元素，我们还可以选择一个元素下的指定类型的元素。类型选择器（type selector）使用元素名称来表示，例如element。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.parent div {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="parent">
<div>Child Element 1</div>
<p>Paragraph Element</p>
<div>Child Element 2</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.parent元素下的所有div子元素，并将它们的文字设置为下划线。
7. 选择指定属性的元素
有时候我们需要选择一个元素下具有指定属性的元素，这时可以使用属性选择器（attribute selector）。属性选择器使用方括号[]来表示，例如[attribute]。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.parent [data-attribute] {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div data-attribute="value1">Element with Data Attribute</div>
<div>Another Element</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.parent元素下具有data-attribute属性的元素，并将其背景颜色设置为浅蓝色。
8. 选择指定属性值的元素
除了选择具有指定属性的元素，我们还可以选择具有指定属性值的元素。属性值选择器（attribute value selector）使用方括号[]和等号=来表示，例如[attribute=value]。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.parent [data-attribute="value1"] {
color: green;
}
</style>
</head>
<body>
<div class="parent">
<div data-attribute="value1">Element with Data Attribute Value1</div>
<div data-attribute="value2">Element with Data Attribute Value2</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.parent元素下具有data-attribute属性且属性值为value1的元素，并将其文字颜色设置为绿色。
9. 选择空元素
<!DOCTYPE html>
<html>
<head>
<style>
.parent:empty {
background-color: lightgray;
}
</style>
</head>
<body>
<div class="parent"></div>
<div class="parent">Non-empty Element</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.parent元素下为空的元素，并将其背景颜色设置为浅灰色。
10. 选择第一个元素
有时候我们需要选择一个元素下的第一个子元素，这时可以使用伪类选择器:first-child。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.parent div:first-child {
font-size: 20px;
}
</style>
</head>
<body>
<div class="parent">
<div>First Child Element</div>
<div>Second Child Element</div>
</div>
</body>
</html>
Output:
在上面的示例中，我们选择了.parent元素下的第一个div子元素，并将其文字大小设置为20像素。
通过以上示例代码，我们详细介绍了如何使用CSS选择器选择一个元素下的多个元素。不同的选择器可以帮助我们精确地选择需要的元素，并对其应用样式。