:first-child 选择器不工作？

Question

我不明白为什么我不能在我的 cal-week-5 div 中 select 第一个元素 class “.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 class，所以这永远行不通。

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

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

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

但是，我建议修改您的代码以将新的 class 添加到第一个单元格。它更容易，更跨浏览器兼容。如果您不关心较旧的浏览器，可以看看花哨的 CSS3 工具。

Answer 2

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

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

这意味着 .day .adjacent-month:first-child 匹配具有 class adjacent-month 的任何元素，该元素处于具有 class day 的元素之下的某个级别，这就是其直接 parent.

的第一个 child

例如，这将匹配：

<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 并且应该得到很好的支持。

:first-child 选择器不工作？

:first-child selector not working?

html

dom

css-selectors