CSS - 运算器

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

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

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

后代运算器（空间）
子组合器（>）
相邻的同级运算器（+）
通用兄弟姐妹 Combinator （~）

CSS Combinators - 后代 Combinator （space）

后代组合器通常由单个空格（“ ”）表示，选择作为指定元素的后代的元素。

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

例如，如果您有一个像这样的 HTML 结构：


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

您可以定位 <div> 中的所有 <p> 元素，如下所示：


div p {
	 	/* CSS styles */
}

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


<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 - 使用列表

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


<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 - 子运算器（>）

子组合器由大于符号（>）表示，选择属于指定元素的直接子元素的所有元素。使用与上述相同的 HTML 结构，您可以仅定位直接子元素 <p>，如下所示：


 div > p {
	 	/* CSS styles */
}

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


<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 - 相邻的同级 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 + button：这将选择紧跟在 span 元素之后的按钮元素。它将按钮的背景颜色设置为黄色。
button + ul：这将选择紧跟在按钮元素之后的 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 - 通用同级 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 Combinators - 运算器的嵌套

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>

打印本页