【问题标题】::first-child selector not working?:first-child 选择器不起作用?
【发布时间】:2015-04-09 22:47:32
【问题描述】:

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

http://jsfiddle.net/qqLcyt1h/

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>

【问题讨论】:

    标签: html dom css-selectors


    【解决方案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 工具。

    【讨论】:

    • 谢谢!向第一个相邻月份的单元格添加一个新类 ?当您谈论花哨的 CSS3 工具时,您的意思是高级选择器?
    • @Anti 是的。较旧的浏览器,尤其是 Internet Explorer,将无法支持尽可能多的 :selectors,因此请小心。我建议添加一个新类,例如 first-of-next-month,并直接对其应用样式。
    【解决方案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 并且应该得到很好的支持。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-07-24
      • 1970-01-01
      • 1970-01-01
      • 2017-07-05
      • 2013-01-23
      • 1970-01-01
      • 2012-05-26
      • 1970-01-01
      相关资源
      最近更新 更多