html - 关于css选择器的问题

问题描述

问 题

求问这题B错误的原因，类选择器：first-child应该是可行的，那没为什么会没有效果呢？

比如我这样写

    .downList2:first-child{
            background: #ddd;
        }

    <ul class="downList">
        <li class="downList2">下拉菜单项</li>
        <li>下拉菜单项</li>
        <li>下拉菜单项</li>
        <li>下拉菜单项</li>
    </ul>

实际上是有效果的，

请问下面这个和上面的那个例子有什么区别呢？

解决方案

子元素选择器前不能用类名只能用元素名。
这么写相当于

*:first-child.b{
}

就是选中所有元素类型中是第一个子元素的，且此元素类名为b。试试就知道了。
实际选择效果是选中div(因为满足*:first-child),然后因为其无.b类名所以未选中任何元素。

---

你把类名放在第二个元素上看还有效吗。

    <ul class="downList">
        <li class="downList2">下拉菜单项</li>
        <li>下拉菜单项</li>
        <li>下拉菜单项</li>
        <li>下拉菜单项</li>
    </ul>

.downList2:first-child = *:first-child.downList2

是第一个子元素的他的类名也是downList2当然有效了。

你的意思是选中类名为downList的且其中是第一个子元素的。但是:nth-child和:nth-of-type之类的选择器前面只能加标签名。写别的就相当于前面写了通配符 然后 同时还要满足拥有此类名。补充：*:first-child.b部分多写了空格，已删除。

这篇关于html - 关于css选择器的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！