jquery - CSS :first-of-type and :last-of-type in table impacts each row individually

Question

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

我使用了 :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;
}

这里它与日期选择器一起运行:

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，具有您当前拥有的样式。

希望我澄清了你的问题:)