前言

在编写 CSS 样式时，选择器间的空格是非常常见的。常常我们会看到类似 div .class {} 的写法，其中 div 和 .class 之间就有一个空格。本文将介绍li css 之间的空格的含义以及在实际场景中的应用。

空格的作用

两个选择器中间的空格表示后代选择器，即指定一个选择器是另一个选择器的后代元素。例如：

div p {
  color: red;
}

表示选中所有是 div 后代元素的 p 标签，并将其文字颜色设置为红色。

类似地，嵌套标签的 li 元素也可以用空格选择器选中：

ul li {
  color: blue;
}

上述代码表示选中所有在 ul 中的 li 元素，并将其文字颜色设置为蓝色。

其他选择器间的空格

空格选择器不仅可以用于li CSS 之间的空格，还能用于其他选择器之间。一些常见的用法：

相邻兄弟选择器

h2 + p {
  color: red;
}

+ 符号为相邻兄弟选择器，表示选择紧接在 h2 元素后的第一个 p 元素，并将其文字颜色设置成红色。

后续兄弟选择器

h2 ~ p {
  color: red;
}

~ 符号为后续兄弟选择器，表示选择紧接在 h2 元素后的所有兄弟元素 p，并将其文字颜色设置成红色。

实际应用

在实际应用中，利用选择器之间的空格可以能够大大简化 CSS 的编写。如下面的示例：

.box {
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
  background: #ccc;
}

.box h2 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.box p {
  font-size: 14px;
  line-height: 1.5em;
}

.box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.box li {
  line-height: 1.5em;
  padding-left: 20px;
  position: relative;
}

.box li:before {
  content: "•";
  position: absolute;
  left: 0;
}

上述 CSS 代码为一个简单的文本框样式。其中，.box li 表示 .box 中的所有 li 元素，.box li:before 表示 .box 中的所有 li 元素的伪元素 :before。使用嵌套选择器（即选择器之间的空格）可以极大地提高样式的组织和可读性。

总结

利用选择器间的空格（即后代选择器）可以方便地选中元素的后代元素。在实际应用中，它可以大大简化 CSS 样式的编写，提高代码的可读性和组织性。了解各种选择器间的空格，可以使我们更好地掌握 CSS 的编写技巧，提高编写效率。