html - CSS语法含义列表样式

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

什么是第一个 child ？有没有second child修饰符？这些 css block 是否被逻辑替代考虑？

Answer 1

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

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

对于第二个 child ，您可以使用li:nth-child(2)(IE <= 8 不支持)，li.first + li 或 :first-child + li(在本例中我们谈论的是 li)- sibling 或 first 元素。在这种情况下，您可以使用更简单的 li + li(除第一个之外的所有 li)。等等

看看当你想触发第 X 个元素时你有什么选择 - http://www.quirksmode.org/css/selectors/#t50 (+ 你可以使用 siblings 选择器触发 next 元素 (+)，或者 all next siblings 选择器 (~ ))等