CSS（层叠样式表）是一种用于网页设计的标记语言，它允许网页设计师为网页中的元素（如文本、图像和其他内容）定义样式。CSS组合器是一种语法，用于选择元素的特定子集以应用样式。以下是几种常见的CSS组合器：
- 后代选择器（Descendant Selector）：使用空格分隔两个元素，匹配一个元素的后代元素。例如，要选择所有段落元素（p）内的强调元素（em）：
p em {
color: red;
}- 直接后代选择器（Child Selector）：使用“>”符号分隔两个元素，匹配一个元素的直接子元素。例如，要选择所有列表（ul）中的列表项（li）：
ul > li {
font-weight: bold;
}- 相邻兄弟选择器（Adjacent Sibling Selector）：使用“+”符号分隔两个元素，匹配在同一父元素下的相邻兄弟元素。例如，要选择第一个段落元素后的第一个标题元素（h1）：
p + h1 {
font-size: 24px;
}- 通用兄弟选择器（General Sibling Selector）：使用“~”符号分隔两个元素，匹配在同一父元素下的所有兄弟元素。例如，要选择第一个段落元素后的所有标题元素（h1）：
p ~ h1 {
font-size: 20px;
}下面是一个完整的示例，展示了如何使用这些组合器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Combinators Example</title>
<style>
/* Descendant Selector */
p em {
color: red;
}
/* Child Selector */
ul > li {
font-weight: bold;
}
/* Adjacent Sibling Selector */
p + h1 {
font-size: 24px;
}
/* General Sibling Selector */
p ~ h1 {
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a <em>test</em> paragraph.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>This is another paragraph.</p>
<h1>This is a heading.</h1>
<p>This is yet another paragraph.</p>
<h1>This is another heading.</h1>
</body>
</html>在这个示例中，第一个段落元素中的强调元素将显示为红色。列表元素中的所有列表项都将显示为粗体字。第一个段落元素后的第一个标题元素将显示为24像素的字体大小。
正文完