Question

我正在尝试使用此标记将第一个子类应用于按钮：

button:first-child {
    background: red;
}

但是它将我的所有按钮都变成了红色，而不仅仅是第一个。 html标记是这样的：

    <ul>
        <li>
            <button type="button"><img src="larrow.png" alt="<" /></button>
        </li>
        <li>
            <button type="button">Test</button>
        </li>
        <li>
            <button type="button"><img src="rarrow.png" alt=">" /></button>
        </li>
    </ul>

有什么建议吗？我确定我只是做错了什么。

Answer 1

尝试ul li:first-child button {background: red}

演示： http://jsbin.com/uzoko4

Answer 2

您想要选择<li>列表中的第一个孩子，然后选择按钮：

li:first-child button {
    background: red;
}

Answer 3

该按钮没有子节点。它是在另一个分支中单独的LI的上下文中。

Answer 4

我很确定，但我不认为Buttons可以从CSS的角度来看孩子。你应该创建一个insted类。

Answer 5

我认为你想要的是：

li:first-child button {
    background: red;
}

但是，我确信并且比这更具体。也许：

ul.redbutton li:first-child button {
    background: red;
}

<ul class="redbutton">
    <li>
        <button type="button"><img src="larrow.png" alt="<" /></button>
    </li>
    <li>
        <button type="button">Test</button>
    </li>
    <li>
        <button type="button"><img src="rarrow.png" alt=">" /></button>
    </li>
</ul>

我在这里错过了什么吗？可以在按钮上使用第一个孩子吗？

5 个答案: