📅 最后修改于: 2023-12-03 15:21:39.273000 🧑 作者: Mango
CSS（Cascading Style Sheets）是一种用于描述如何展现 HTML（Hypertext Markup Language）或 XML（Extensible Markup Language）等文件的样式表语言。在 CSS 中，选择器用于选择要设置样式的 HTML 元素。其中，“空格”选择器是其中一种，它的作用是匹配指定元素中的所有后代元素，不论它们是嵌套在多少层父元素中。
在 CSS 中，“空格”选择器使用空格符“ ”分隔两个选择器。
selector1 selector2 {
property1: value1;
property2: value2;
}
如上示例中，selector1 是父元素的选择器，selector2 是子元素的选择器。这里的“空格”符号表示在 selector1 的范围内找 selector2。
“空格”选择器常常用于设置嵌套样式，它匹配的是它前面的选择器所包含的所有子元素。比如以下 HTML 结构：
<div class="container">
<div class="wrapper">
<h1>Hello World</h1>
<p>This is an example.</p>
</div>
</div>
可以使用“空格”选择器来设置 .container 元素内的所有 h1 元素的样式：
.container h1 {
font-size: 24px;
color: red;
}
这样就会使 .container 元素内的所有 h1 元素大小为 24 像素，颜色为红色。
以下是一个包含 “空格” 选择器的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>CSS空格选择器示例</title>
<style>
/* 选择所有元素 */
* {
margin: 0;
padding: 0;
}
/* 选择.container元素内所有h1元素 */
.container h1 {
font-size: 48px;
color: red;
text-align: center;
}
/* 选择.wrapper元素内所有p元素 */
.wrapper p {
font-size: 24px;
color: #333;
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<h1>Welcome to my website</h1>
<p>This is an example of how to use the css " " selector.</p>
<p>It is used to select all descendant elements of a given element.</p>
</div>
</div>
</body>
</html>
以上代码中，.container h1 选择器匹配 container 元素内的 h1 元素，.wrapper p 选择器匹配 .wrapper 元素内的所有 p 元素。这样可以对不同元素设置不同样式，避免样式冲突。