利用结构伪类选择器制作日历

利用CSS的结构伪类选择器可以为HTML中的元素创建动态效果，比如模拟制作日历。其中常用的结构伪类有`:before` 和 `:after`，它们可以在元素之前或之后插入内容。下面是一个简单的示例，展示如何用它们来创建一个基础的日历表头：

.month-calendar {
  display: inline-block;
}

.month-calendar::before {
  content: "月份: ";
}

.month-calendar > li {
  display: inline-block;
  width: calc(14.2857% - 2px); /* 如果有12天份，宽度为一个月的天数 */
  margin-right: 1.42857%; /* 留出间隔 */
}

.month-calendar > li:last-child {
  margin-right: 0; /* 防止最后一个日期右边留白 */
}

.month-calendar > li::before {
  content: attr(data-date);
  font-size: smaller;
}

在这个例子中，`.month-calendar` 包含了一个列表 (`li`)，每个列表项代表一天。`::before` 伪类用于在每个日期前添加文本，`data-date` 属性用于设置日期值。

要实际应用这个样式，你需要结合HTML结构，例如：

<div class="month-calendar">
  <li data-date="1">1</li>
  <li data-date="2">2</li>
  <!-- ... -->
</div>