Question

我在正文中有站点代码

HTML：

<ul id="navlist">
    <li class="first">
        <a href="/" id="current">Home</a>
    </li>
    <li>
        <a href="/Store/">Store</a>
    </li>
</ul>

和这种风格的CSS：

ul#navlist
{
    float: right;
}

ul#navlist li
{
    display: inline;
}

ul#navlist li a
{
    border-left: 1px dotted #8A8575;
    padding: 10px;
    margin-top: 10px;
    color: #8A8575;
    text-decoration: none;
    float: left;
}

ul#navlist li:first-child a
{
    border: none;
}

ul#navlist li a:hover
{
    color: #F6855E;
}

我试着理解其含义和语法：

ul#navlist li:first-child a

componentClass#class componentClass:class(???) componentClass

什么是first-child？是否有second child修饰符？那些css块是否被逻辑替代考虑？

Answer 1

First-child是父元素的第一个子元素 - http://www.quirksmode.org/css/selectors/firstchild.html

在这种情况下，li:first-child与li.first相同。

对于第二个孩子，您可以使用li:nth-child(2)（在IE＆lt; = 8中不支持），li.first + li或:first-child + li（在这种情况下，我们会谈到li s ） - 兄弟姐妹或第一元素。在这种情况下，您可以使用简化li + li（除第一个之外的所有li）。等

查看当您要触发Xth元素时有哪些选项 - http://www.quirksmode.org/css/selectors/#t50（+您可以使用兄弟选择器来触发next元素（+）或all next siblings选择器（~））等

CSS语法含义列表样式

1 个答案: