CSS 组合器 - 易学教程，面试笔记经验！

在 CSS（层叠样式表）中，组合符是指定要设置样式的不同 HTML 元素之间关系的符号或字符。组合器可帮助您根据元素在 HTML 文档中的位置和层次结构来定位元素。

这些组合器允许您根据 HTML 结构中元素之间的关系有选择地应用样式，使您的 CSS 更加具体和有针对性，以实现所需的样式效果。

有四种CSS组合器的主要类型:

后代组合器（空格）
子组合器（>）
相邻同级组合器 (+)
一般同级组合器 (~)

CSS 组合器: 后代组合器（空格）

后代组合器通常由单个空格 (" ") 表示，选择作为指定元素的后代的元素。

如果一个元素与第二个选择器（后代）匹配，并且具有与第一个选择器匹配的祖先（父级、父级的父级等），那么该元素将被选择。

例如，如果您有一个 HTML结构如下:

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
 </div>

您可以像这样定位 <div> 内的所有 <p> 元素:

div p {
   /* CSS styles */
}

以下代码演示了后代组合器的用法。在此示例中，我们有一个父元素 <div> ，其类名为parent。在这个父元素内，我们有多个 <p> 元素。我们将对类名为 child 的子元素应用一些样式。

<html>
<head>
<title>Descendant Combinator Example</title>
<style>
   .parent {
      background-color: lightblue;
      padding: 20px;
   }
   .parent p {
      color: red;
      font-weight: bold;
   }
</style>
</head>
<body>
      <div class="parent">
       <h1>这是父元素</h1>
       <p>这是父元素内的一个段落。</p>
       <p>这是父元素内的一个段落。</p>
    </div>
    <div>
       <p>这是父元素之外的段落。</p>
    </div>
</body>
</html>

CSS 组合器: 使用列表

以下示例演示了列表元素的后代组合器的用法。

<html>
<head>
<title>后代组合器示例</title>
<style>
   div ul {
      background-color: lightblue;
      padding: 10px;
   }
   div ul li {
      color: white;
      margin-bottom: 5px;
   }
</style>
</head>
<body>
   <div>
   <h2>Fruits</h2>
      <ul>
         <li>Apple</li>
         <li>Banana</li>
         <li>Orange</li>
      </ul>
   </div>
</body>
</html>

CSS 组合器: 子组合器 (>)

子组合器由大于号 (>) 表示，选择作为指定元素的直接子级的所有元素。使用与上面相同的 HTML 结构，您可以仅定位直接子 <p> 元素，如下所示:

div > p {
   /* CSS styles */
}

以下示例演示了子选择器 (>) 的用法。在此示例中，我们有一个父元素 <div> ，其类名为parent。在父元素内部，我们有多个 <p> 元素。我们希望将特定样式应用于类名为 child 的子元素。

<html>
<head>
<title>子组合器示例</title>
<style>
   .parent > .child {
      color: blue;
   }
</style>
</head>
   <body>
      <div class="parent">
         <p>This is the parent element.</p>
         <p class="child">This is the first child element.</p>
         <p class="child">This is the second child element.</p>
         <p>This is the third child element.</p>
         <p>This is the fourth child element.</p>
      </div>
      <div>
         <p>This is another paragraph.</p>
      </div>
</body>
</html>

以下示例演示了如何使用子组合器选择器来定位作为父元素的直接子元素的特定元素，允许更精确的样式和自定义。

<html>
<head>
<title>Child Combinator Example</title>
   <style>
      div > span {
      color: red;
      }
      ul > li {
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div>
      <span>This text will be red.</span>
      <span>This text will not be affected.</span>
   </div>
   <ul>
      <li>This list item will have bold font-weight.</li>
      <li>This list item will also have bold font-weight.</li>
   </ul>
</body>
</html>

CSS 组合器: 相邻同级组合器 (+)

相邻同级组合器由加号 (+) 表示，选择一个元素紧接着指定的元素。例如，如果您有以下 HTML:

<h2>Heading 1</h2>
<p>Paragraph 1</p>
<h2>Heading 2</h2>
<p>Paragraph 2</p>

您可以定位直接跟在 <h2> 后面的 <p> 元素，如下所示:

h2 + p {
/* CSS styles */
}

以下代码演示了相邻同级元素的用法选择器（+）。在此示例中，我们的目标是直接跟随 <h2> 元素的段落。

<html>
<head>
<style>
   h2 + p {
      color: red;
   }
</style>
</head>
<body>
      <div>
    <h2>相邻兄弟组合器示例</h2>
       <p>这是第一段。</p>
       <p>这是第二段。</p>
    </div>
    <div>
       <p>这是第三段。</p>
       <p>这是第四段。</p>
    </div>
</body>
</html>

这是另一个演示相邻同级选择器 (+) 用法的示例。

div + span:选择紧跟在 div 元素后面的 span 元素。它将 span 文本的颜色设置为红色。
span + 按钮:选择紧跟在 span 元素后面的按钮元素。它将按钮的背景颜色设置为黄色。
button + ul:选择紧跟在按钮元素后面的 ul 元素。它将无序列表的 list-style-type 更改为方形项目符号。

<html>
<head>
<style>
   div + span {
      color: red;
   }   
   span + button {
      background-color: yellow;
   }
   button + ul {
      list-style-type: square;
   }
</style>
</head>
<body>
   <div>This is a div element.</div>
   <span>This is a span element.</span>
   <button>This is a button element.</button>
   <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
   </ul>
</body>
</html>

CSS 组合器: 通用同级组合器 (~)

通用同级组合器，由波形符 (~) 表示，选择与指定元素同级的所有元素。它类似于相邻同级组合器，但不要求元素直接相邻。例如:

<h2>Heading 1</h2>
   <p>Paragraph 1</p>
   <h2>Heading 2</h2>
   <p>Paragraph 2</p>

您可以将所有 <p> 元素作为 </h2> 的同级元素，如下所示:

h2 ~ p {
/* CSS styles */
}

以下代码使用通用同级选择器 (div ~ p) 进行选择作为 <div> 的同级元素的所有 <p> 元素。在这种情况下，选择器将定位第二段和第三段，并对它们应用指定的样式。

<html>
<head>
<style>     
   div ~ p {
      color: blue;
   }
</style>
</head>
<body>
      <h2>通用兄弟组合器示例 <h2>
    <div>
       <p>该段落不受一般同级选择器的影响。</p>
    </div>
    <p>本段受一般兄弟选择器影响。</p>
    <p>这一段也受到一般兄弟选择器的影响。</p>
</body>
</html>

在以下示例中，<div> 元素包含三个按钮，后跟三个按钮<div> 之外的其他按钮。 CSS 代码使用通用同级组合器（div ~ 按钮）选择 <div> 元素的同级元素的所有按钮。

<html>
<head>
  <title>General Sibling Combinator Example</title>
  <style>
   div ~ button {
      background-color: blue;
      color: white;
      padding: 10px;
      margin: 5px;
   }
</style>
</head>
<body>
  <div>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>
</body>
</html>

CSS 组合器: 组合器的嵌套

CSS 提供了灵活性利用任何选择器和组合器来定位文档的特定部分。

在下面的示例中，我们看到使用组合器的组合来定位 HTML 文档的特定部分。

<html>
<head>
<title>Nesting of Combinators</title>
<style>
   /* 父选择器 */
   .parent {
      background-color: lightblue;
      padding: 20px;
   }
   /* 子选择器 */
   .parent .child {
      background-color: lightgreen;
      padding: 10px;
   }
   /* 后代选择器 */
   .parent span {
      color: red;
      }
   /* 相邻兄弟选择器 */
   .parent + .sibling {
      font-weight: bold;
   }
   /* 通用兄弟选择器 */
   .parent ~ .sibling {
      text-decoration: underline;
   }
</style>
</head>
<body>
   <div class="parent">
      <div class="child">
         <span>这是一个子元素</span>
      </div>
   </div>
   <div class="sibling">这是同级元素</div>
</body>
</html>