Css 简明教程

CSS - Combinators

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

In CSS (Cascading Style Sheets), combinators are symbols or characters that specify the relationship between different HTML elements that you want to style. Combinators help you target elements based on their position and hierarchy within the HTML document.

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

These combinators allow you to apply styles selectively based on the relationships between elements in your HTML structure, making your CSS more specific and targeted to achieve the desired styling effects.

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

There are four main types of CSS combinators:

  1. Descendant Combinator (space)

  2. Child Combinator (>)

  3. Adjacent sibling Combinator (+)

  4. General sibling Combinator (~)

CSS Combinators - Descendant Combinator (space)

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

The descendant combinator, often represented by a single space (" "), selects elements that are descendants of specified element.

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

If an element matches the second selector(descendant) and has an ancestor (parent, parent’s parent, etc.) that matches the first selector, then that element will be selected.

例如,如果你有这样的 HTML 结构:

For example, if you have an HTML structure like this:

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

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

You can target all <p> elements inside the <div> like this:

div p {
   /* CSS styles */
}

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

The following code demonstrates the usage of the descendant combinator. In this example, we have a parent element <div> with the class name parent. Inside this parent element, we have multiple <p> elements. We will apply a some styles to the child elements with the class name 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

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

The following example demonstrates the usage of the descendant combinator for list elements.

<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>:

The child combinator, represented by the greater-than symbol (>), selects all elements that are immediate children of a specified element. Using the same HTML structure as above, you can target only the immediate child <p> elements like this:

div > p {
   /* CSS styles */
}

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

The following example demonstrates the usage of the child selector(>). In this example, we have a parent element <div> with the class name parent. Inside the parent element, we have multiple <p> elements. We want to apply a specific style to the child elements with the class name 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>

下面的示例演示了如何使用子元素组合器选择器定位作为父元素直接子元素的特定元素,从而进行更精确的样式设计和定制。

The following example demonstrates how the child combinator selector can be used to target specific elements that are direct children of a parent element, allowing for more precise styling and customization.

<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:

The adjacent sibling combinator, represented by the plus sign (+), selects an element that is immediately preceded by a specified element. For example, if you have the following HTML:

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

你可以像这样定位紧跟在 <h2> 之后的 <p> 元素:

You can target the <p> element that directly follows a <h2> like this:

h2 + p {
/* CSS styles */
}

下面的代码演示了相邻同级元素选择器 (+) 用法。在此示例中,我们定位紧跟在 <h2> 元素之后的段落。

The following code demonstrates the usage of the adjacent sibling selector(+). In this example we are targeting the paragraphs that directly follow <h2> elements.

<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>

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

Here is another example demonstrating the usage of the adjacent sibling selector(+).

  1. div + span: This selects the span element that immediately follows a div element. It sets the color of the span text to red.

  2. span + button: This selects the button element that immediately follows a span element. It sets the background color of the button to yellow.

  3. *button + ul: * This selects the ul element that immediately follows a button element. It changes the list-style-type of the unordered list to square bullets.

<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 (~)

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

TThe general sibling combinator, represented by the tilde symbol (~), selects all elements that are siblings of a specified element. It’s similar to the adjacent sibling combinator but doesn’t require elements to be immediately adjacent. For instance:

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

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

You can target all <p> elements that are siblings of </h2> like this:

h2 ~ p {
/* CSS styles */
}

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

The following code uses the general sibling selector (div ~ p) to select all <p> elements that are siblings of a <div>. In this case, the selector will target the second and third paragraphs, applying the specified style to them.

<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> 元素的兄弟姐妹按钮。

In the following example a <div> element contains three buttons, followed by three additional buttons outside the <div>. The CSS code selects all the buttons that are siblings of the <div> element using the general sibling combinator (div ~ button).

<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 Combinators - Nesting of Combinators

CSS 提供灵活性,可与组合器一起使用任何选择器以定位文档的特定部分。

CSS gives the flexibility to utilize any of the selectors along with combinators to target specific sections of your document.

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

In the following example, we see using comination of combinators to target spectic sections of the HTML document.

<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>