Question

我正在尝试使用jQuery datepicker来允许用户选择开始和结束日期。我希望它自动围绕第一个日期的左边缘，以及最后一个日期的右边缘（或者如果只选择一个日期，则为一个日期的两个边缘）。

我使用过：first-of-type和：last-of-type，但这些似乎分别影响了datepicker表的每一行。这是我的css：

td.dp-highlight:first-of-type .ui-state-default {
    border-top-left-radius:1em;
    border-bottom-left-radius:1em;
}

td.dp-highlight:last-of-type .ui-state-default {
    border-top-right-radius:1em;
    border-bottom-right-radius:1em;
}

这里运行的是datepicker：

http://jsfiddle.net/xTaxJ/1/

尝试在周三中间选择一天，比如周三，然后选择从那天起的两周后的星期三。你会注意到圆边是有效的，但是每一行都是单独的。尽管它们是第一个也是最后一个，但在星期三都不起作用。此外，不应该是第一次和最后一次只发一次？它们将包裹您选择的周末的边缘。

任何人都可以解释为什么会这样吗？这让我非常生气。非常感谢！

编辑：这是一张显示会发生什么的图片。 http://imgur.com/ld4Sg99在该范围内选择了深绿色的日子，并且都具有.dp-highlight类。看看每行的边缘是如何舍入的，而不是实际的开始和结束日期？为什么会这样？

Answer 1

您遇到问题的原因是:first-of-type伪选择器（及其兄弟姐妹，:first-child等）在其容器的上下文中工作，并应用于标记;以你的图片为例，所有突出显示的单元格，其容器中第一个的容器是Su10和Su17，同样的逻辑适用于:last-of-type。

请记住，日历实际上是一个表格，因此所选日期会跨越几行。

你真正想要的是将一些样式应用于选择中的第一个单元格，将另一个样式应用于最后一个单元格，为此我将使用类：使第一次单击分配.date-from类或其他内容像那样，第二个.date-to，你现在拥有的样式。

希望我澄清你的问题：）

css：first-of-type和：table中的last-of-type分别影响每一行

1 个答案: