极客教程CSS如何同时选择两个元素
在网页开发中，我们经常需要对多个元素进行样式设置，而有时候需要同时选择两个元素来设置它们的共同样式。在CSS中，我们可以使用逗号分隔的方式来选择多个元素，以实现同时选择多个元素的目的。本文将详细介绍如何使用CSS同时选择两个元素，以及示例代码演示。
逗号分隔的多元素选择器
在CSS中，使用逗号分隔的方式可以同时选择多个元素，从而为这些元素设置相同的样式。例如，要同时选择所有的<h1>和<h2>元素，并设置它们的文字颜色为红色，可以使用以下CSS代码：
h1, h2 {
color: red;
}
上述代码中，逗号用来分隔选择器，指定了同时选择<h1>和<h2>元素。接着，在大括号内设置它们的共同样式，这里是将文字颜色设置为红色。
父元素下的子元素选择器
除了直接选择多个元素外，有时还需要同时选择某一个元素下的多个子元素。这时，可以使用父元素下的子元素选择器来实现。例如，要选择一个<div>元素下的所有<p>元素，并设置它们的字体样式为斜体，可以使用以下样式：
div p {
font-style: italic;
}
上述代码中，通过空格分隔父元素和子元素，表示选择<div>元素下的所有<p>元素。然后在大括号内设置它们的共同样式，这里是将字体样式设置为斜体。
群组选择器
除了使用逗号分隔的方式和父元素下的子元素选择器外，还可以使用群组选择器同时选择多个元素。群组选择器可以将相同样式应用于同一元素组中的所有元素。例如，要选择所有的链接元素和段落元素，并设置它们的文字颜色为蓝色，可以使用以下样式：
a, p {
color: blue;
}
上述代码中，逗号分隔了链接元素选择器a和段落元素选择器p，表示同时选择这两种元素。然后在大括号内设置它们的共同样式，这里是将文字颜色设置为蓝色。
通配符选择器
在有些情况下，我们可能需要为页面上的所有元素设置相同样式。这时，可以使用通配符选择器*来选择所有元素。例如，要为页面上的所有元素设置边框样式为实线黑色，可以使用以下样式：
* {
border: 1px solid black;
}
上述代码中，通配符选择器*表示选择所有元素，然后在大括号内设置它们的共同样式，这里是将边框样式设置为实线黑色。
伪类选择器
除了常规元素选择器外，CSS还提供了伪类选择器来选择元素的特殊状态。其中，:hover用于选择鼠标悬停在元素上时的状态。例如，要在鼠标悬停在链接元素上时改变文字颜色为红色，可以使用以下样式：
a:hover {
color: red;
}
上述代码中，:hover伪类选择器用于选择鼠标悬停在链接元素<a>上时的状态，然后在大括号内设置相应的样式，这里是将文字颜色设置为红色。
示例演示
下面通过一个简单的HTML示例演示如何使用CSS同时选择两个元素并设置它们的样式：
<!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>
h1, h2 {
color: blue;
}
div p {
font-style: italic;
}
a, p {
color: green;
}
* {
border: 1px solid black;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello CSS!</h2>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<a href="#">Link</a>
<p>This is a paragraph.</p>
</body>
</html>
在上述示例中，同时选择了<h1>和<h2>元素，并将文字颜色设置为蓝色；选择了<div>元素下的<p>元素，并将字体样式设置为斜体；选择了链接元素<a>和段落元素<p>，将文字颜色设置为绿色；使用通配符选择器为所有元素设置了边框样式。此外，通过:hover伪类选择器设置了链接元素鼠标悬停时的文字颜色为红色。