Question

我不明白为什么我不能在我的cal-week-5 div中选择带有“.adjacent-month”类的第一个元素。（在最后一天制作左边框）

HTML：

        <div class=" week cal-week-5">
            <div class="day past calendar-day-2015-03-30 calendar-dow-0">30
                <div class=" value val-30"></div>
            </div>
            <div class="day past calendar-day-2015-03-31 calendar-dow-1">31
                <div class=" value val-31"></div>
            </div>
            <div class="day past adjacent-month next-month calendar-day-2015-04-01 calendar-dow-2">1
                <div class=" value val-1"></div>
            </div>
        </div>

Answer 1

两个问题。

.cal-week-5 .day .adjacent-month:first-child .value

1）单元格 .day和.adjacent-month类，所以这将永远不会有效。

.cal-week-5 .day.adjacent-month:first-child .value

2）:first-child仅适用于父元素的第一个子元素，因此只有当这一天是第5周的第一天时才会触发。

选择第一种类型有一些实验性选项。您可以在此处阅读更多内容：CSS selector for first element with class

然而，我建议修改你的代码，将新类添加到第一个单元格。它更容易，更兼容跨浏览器。如果您不关心旧浏览器，可以查看精美的CSS3工具。

Answer 2

如Jaw.sh所述，您需要删除选择器的.day部分。但是，您最大的误解可能来自:first-child选择器本身。

如reference中所述，:first-child选择器“当E是其父级的第一个孩子时，匹配元素E.”

这意味着.day .adjacent-month:first-child匹配任何类adjacent-month的元素，该元素位于具有类day的元素之下的某个级别，并且是其直接父级的第一个子级。

例如，这将匹配：

<div class="day">
    <ul>
        <li class="adjacent-month">First child</li>
        <li class="adjacent-month">Second child</li>
    </ul>
</div>

你可能想要的是

.cal-week-5 :not([class*=adjacent-month]) + .adjacent-month .value

记录here，应该得到很好的支持。

：第一个孩子选择器不工作？

2 个答案: