Css 简明教程

CSS - Combinators

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

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

CSS 组合器共有四种主要类型：

Descendant Combinator (space)
Child Combinator (>)
Adjacent sibling Combinator (+)
General sibling Combinator (~)

CSS Combinators - Descendant Combinator (space)

后代组合器通常由单空格 (“”) 表示，用于选择指定元素的后代元素。

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

例如，如果你有这样的 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>This is the parent element</h1>
      <p>This is a paragraph inside the parent element.</p>
      <p>This is a paragraph inside the parent element.</p>
   </div>
   <div>
      <p>This is a paragraph outside the parent element.</p>
   </div>
</body>
</html>

CSS Combinators - Using List

下面的示例演示了将后代组合器用于列表元素。

<html>
<head>
<title>Descendant Combinator Example</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 Combinators - Child Combinator (>)

子元素组合器用大于符号 (>) 表示，用于选择某个指定元素的所有直接子元素。使用与上面相同的 HTML 结构，你可以像这样仅定位直接子元素 <p>：

div > p {
   /* CSS styles */
}

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

<html>
<head>
<title>Child Combinator Example</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 Combinators - Adjacent sibling Combinator (+)

相邻同级元素组合器用加号 (+) 表示，用于选择紧靠在某个指定元素之后的元素。例如，如果你有以下 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>Example of Adjacent Sibling Combinator</h2>
      <p>This is the first paragraph.</p>
      <p>This is the second paragraph.</p>
   </div>
   <div>
      <p>This is the third paragraph.</p>
      <p>This is the fourth paragraph.</p>
   </div>
</body>
</html>

以下是一个演示相邻同级元素选择器 (+) 用法的示例。

div + span: 它选择紧跟在 div 元素之后的 span 元素。它将 span 文本颜色设为红色。
span + button: 它选择紧跟在 span 元素之后的 button 元素。它将按钮背景色设为黄色。
*button + ul: * 它选择紧跟在 button 元素之后的 ul 元素。它将无序列表的列表样式类型更改为方块项目符号。

<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 Combinators - General sibling Combinator (~)

通用同级元素组合器用波浪号 (~) 表示，用于选择某个指定元素的所有同级元素。它与相邻同级元素组合器类似，但不要求元素紧挨着出现。例如：

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

你可以像这样定位所有与 </h2> 同级的 <p> 元素：

h2 ~ p {
/* CSS styles */
}

以下代码使用通用的兄弟姐妹选择器（div ~ p）来选择所有是 <div> 兄弟姐妹的 <p> 元素。在本例中，选择器将定位第二个和第三个段落，并对其应用指定的样式。

<html>
<head>
<style>
   div ~ p {
      color: blue;
   }
</style>
</head>
<body>
<h2>Example of General Sibling Combinator <h2>
   <div>
      <p>This paragraph is not affected by the general sibling selector.</p>
   </div>
   <p>This paragraph is affected by the general sibling selector.</p>
   <p>This paragraph is also affected by the general sibling selector.</p>
</body>
</html>

在以下示例中，<div> 元素包含三个按钮，后面是 <div> 外部的三个其他按钮。CSS 代码使用通用的兄弟姐妹组合器（div ~ button）选择所有是 <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 组合器 - 组合器的嵌套 [id="_css_combinators_nesting_of_combinators"] === CSS 组合器 - 组合器的嵌套 CSS 提供灵活性，可与组合器一起使用任何选择器以定位文档的特定部分。在以下示例中，我们看到使用组合器的组合来定位 HTML 文档的特定部分。

<html>
<head>
<title>Nesting of Combinators</title>
<style>
   /* Parent selector */
   .parent {
      background-color: lightblue;
      padding: 20px;
   }
   /* Child selector */
   .parent .child {
      background-color: lightgreen;
      padding: 10px;
   }
   /* Descendant selector */
   .parent span {
      color: red;
      }
   /* Adjacent sibling selector */
   .parent + .sibling {
      font-weight: bold;
   }
   /* General sibling selector */
   .parent ~ .sibling {
      text-decoration: underline;
   }
</style>
</head>
<body>
   <div class="parent">
      <div class="child">
         <span>This is a child element</span>
      </div>
   </div>
   <div class="sibling">This is a sibling element</div>
</body>
</html>