Question

我正在尝试更改第二个按钮背景颜色。但是，它也会影响第一个按钮。你能帮帮我吗？这是我的代码：

<table class="table table-striped table-bordered table-hover">
<thead>
    <tr class="caption">
        <th class="center" colspan="8">Name</th>
        <th class="center" colspan="3">
            <button class="btn btn-white btn-info btn-bold" title="Save" onclick="Save();">

            </button>
            <button class="btn btn-white btn-info btn-bold" title="Cancel" onclick="Cancel();">

            </button>

        </th>
    </tr>
    <tr>
</table>

Answer 1

您无缘无故地使用了'+'而忘记分配一个班级“。”。

基本上，从您的代码中读取：

获取课程表，其子元素（它是一个类）和效果（为什么，如何？为什么使用此检查？这就像使用 if function）元素thead及其子元素..（等等）

.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th

Answer 2

只需给第二个按钮一个额外的课程。请查看此jsfiddle

<强> HTML

<table class="table table-striped table-bordered table-hover">
<thead>
    <tr class="caption">
        <th class="center" colspan="8">Name</th>
        <th class="center" colspan="3">
            <button class="btn btn-white btn-info btn-bold" title="Save" onclick="Save();">Save

            </button>
            <button class="btn btn-white btn-info btn-bold second" title="Cancel" onclick="Cancel();">Cancel

            </button>

        </th>
    </tr>
</thead>
</table>

<强> CSS

.second {
  background-color: #123456;
}

Answer 3

您可以使用nth-child选择器：

button:nth-child(2) {
  background: red;
}

但是给它按钮它自己的类会更有意义：

.btn-cancel {
  background: red;
}

Bootstrap（您似乎正在使用）甚至已准备好btn-danger类，因此即使没有任何自定义CSS也可以工作：

<button class="btn btn-bold btn-danger" onclick="Cancel();">Cancel</button>

还有其他颜色可供选择：query。

bootstrap docs

顺便说一下。按钮标签不适用于您的代码，它应该是

<button class="btn btn-white btn-info btn-bold" onclick="Save();">Save</button>

不

<button class="btn btn-white btn-info btn-bold" title="Save" onclick="Save();"></button>

CSS第二个孩子问题

3 个答案: