Question

我在设置单个表格单元格时遇到问题。这是一个说明我的问题的示例代码：

<style>
#bltable { border-collapse:collapse; width:575px;
    -moz-user-select:none;}
#bltable tr.row1 {background-color:#eff3f7;}
#bltable tr.row2 {background-color:#ffffff;}
#bltable tr.fotm td {background-color:#ffffd9;}
#bltable td.op td {background-color:#f2f2c3;}
</style>
<table id="bloodlines">
    <tr class="row1">
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
        <tr class="row2">
        <td>sup</td>
        <td>sup</td>
        <td class="op">sup</td>
        <td>sup</td>
    </tr>
    <tr class="fotm">
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
    </tr>
</table>

正如您所看到的，该表有两种主要颜色（row1和row2）可以更改每一行（checkboard样式）。该表还有一个月份的味道＆＃34;另外第三种颜色的行。最后，该表有一个td class =＆＃34; op＆＃34;这将是第四种颜色。

我遇到的问题是row1，row2和fotm类会覆盖＆＃34; op＆＃34;类颜色和第四种颜色未显示。我可以用不同的方式写这篇文章吗？

我试过了：

#bltable tr.row1

（没有＆＃34; td＆＃34;最后）但是我根本没有得到行颜色，因为＆＃34; X不是继承的。它适用于封闭标签＆＃34;

此外，我不确定是否需要额外的＆＃34; td＆＃34;在

结束时

#bltable td.op td {}

鉴于td.op应该照顾那部分..原则上不应该只

.op {}

够了吗？

有什么想法吗？

Answer 1

您需要在css中更改此行

#bltable td.op td {background-color:#f2f2c3;}

到这个

#bltable tr td.op {background-color:#f2f2c3;}

您有两个td和第一个.op。

示例：http://jsfiddle.net/jasongennaro/LdSM3/

Answer 2

你的规则是错误的。它应该是：

#bltable td.op {background-color:#f2f2c3;}

或

#bltable tr td.op {background-color:#f2f2c3;}

Answer 3

你必须使用它：

bltable td.op {background-color:#f2f2c3;}

你没错，额外的“td”是没有必要的。

Answer 4

您的<td class="op">需要使用#bltable td.op {background-color:#f2f2c3;}而非#bltable td.op td {background-color:#f2f2c3;}

进行样式设置

http://jsfiddle.net/AlienWebguy/QvdsQ/

Answer 5

#bltable td.op td会选择 TD下方的任何td.op ，这样就不是您正在寻找的选择器。

基本上，您正在遇到specificity problem：您的row1和row2选择器在其选择器中还有一个HTML元素，因此它们更具体，并且赢得了＆＃34;与您的td.op选择器进行比较时;您需要使td.op选择器具体（或更具体）而不是其他选择器，以便将其应用：

#bltable tr.row1 td {background-color:#eff3f7;} #bltable tr.row2 td {background-color:#ffffff;} #bltable tr.fotm td {background-color:#ffffd9;} #bltable tr td.op {background-color:#f2f2c3;}

上面，你有一个ID，一个带有类的元素，以及每个选择器的元素。那应该为你做。

Answer 6

将您的class标记更改为id标记，然后在其下方使用一些javascript为其着色：

<style>
#bltable { border-collapse:collapse; width:575px;
    -moz-user-select:none;}
#bltable tr.row1 {background-color:#eff3f7;}
#bltable tr.row2 {background-color:#ffffff;}
#bltable tr.fotm td {background-color:#ffffd9;}
#bltable td.op td {background-color:#f2f2c3;}
</style>
<table id="bloodlines">
<tr class="row1">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
</tr>
    <tr class="row2">
    <td>sup</td>
    <td>sup</td>
    <td id="op">sup</td>
    <td>sup</td>
</tr>
<tr class="fotm">
    <td>sup</td>
    <td>sup</td>
    <td>sup</td>
    <td>sup</td>
</tr>
</table>

<script>
     document.getElementById("op").style.background = "#f2f2c3";
</script>

Answer 7

td.op之后的td是错误的，因为没有嵌套的TD。我会在td.op之后添加！important，应该这样做。

（我用智能手机写这个，所以我无法测试，对不起）

样式化单个表格单元格

7 个答案: