在 CSS 中选择日期范围

A date range selector lets users pick a time frame between a start and end date, which is useful in booking trips, sorting info by date blocks, picking time slots, and planning schedules.

日期范围选择器允许用户在起始日期和结束日期之间选择时间范围，这在预订行程、按日期块排序信息、选择时间段和规划日程时非常有用。

Example pulled from Airbnb

从 Airbnb 提取的示例

I’m going to show you an example where, even though JavaScript is involved, the bulk of the work is handled by the “n of selector(s)” syntax of the CSS [:nth-child](https://css-tricks.com/almanac/pseudo-selectors/n/nth-child/) selector, making it easy to build the range selection.

我将向您展示一个例子，即使涉及 JavaScript，大部分工作也是由 CSS [:nth-child](https://css-tricks.com/almanac/pseudo-selectors/n/nth-child/) 选择器的“n of selector(s)”语法处理的，这使得构建范围选择变得容易。

The “n of selector” syntax

“n of selector” 语法

This syntax of the :nth-child selector filters elements by a given selector first among all the child elements, before selecting them by a counting order.

:nth-child 选择器的这种语法首先在所有子元素中根据给定的选择器过滤元素，然后按计数顺序选择它们。

<p>The reclamation of land...</p>
<p>The first reclamations can be traced...</p>
<p class="accent">By 1996, a total of...</p>
<p>Much reclamation has taken...</p>
<p class="accent">Hong Kong legislators...</p>

.accent {
  color: red;
}
.accent:nth-child(2) {
  font-weight: bold; /* does not work */
}
:nth-child(2 of .accent){
  text-decoration: underline;
}

There are two .accent-ed paragraphs with red text. As we try to target the second accented paragraph, .accent:nth-child(2) fails to select it because it’s trying to find an .accent element that’s the second child of its parent.

有两个带有 red 文本的 .accent 段落。当我们尝试针对第二个强调段落时，.accent:nth-child(2) 无法选择它，因为它试图找到一个 .accent 元素，该元素是其父元素的第二个子元素。

Whereas, :nth-child(2 of .accent) succeeds in selecting and styling the second accented paragraph because it’s only looking for the second element among the **.accent** elements rather than the second of all of the children.

相比之下，:nth-child(2 of .accent) 成功选择了并样式化了第二个强调段落，因为它只在**.accent** 元素中寻找第二个元素，而不是所有子元素的第二个。

The Layout

布局

Moving onto our main example, let’s put...