Styling a single table cell

问题:

I have a problem with styling a single table cell. Here is an example code illustrating my problem:

<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>

As you can see the table has two main colours (row1 and row2) that change each row (checkboard style). The table also has a "flavour of the month" row with an additional third color. Lastly the table has a single td class="op" that will be a fourth color.

The problem I'm having is that row1, row2 and the fotm class overrides the "op" class color and the fourth color is not shown. Can I write this any differently to make it work?

I've tried:

#bltable tr.row1 

(without "td" in the end) but then I get no row color at all, seeing as "X is not inherited. It is applied to an enclosing tag"

Furthermore, Im not sure wether its necessary to have the extra "td" at the end of

#bltable td.op td {}

given that td.op should take care of that part.. In principle shouldn't only

.op {}

be enough?

Any ideas?

回答1:

You need to change this line in your css

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

to this

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

You had two tds and the .op on the first.

Example: http://jsfiddle.net/jasongennaro/LdSM3/

回答2:

Your rule is wrong. It should be:

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

or

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

回答3:

You have to use this :

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

You right, the extra "td" isn't necessary.

回答4:

Your <td class="op"> needs to be styled with #bltable td.op {background-color:#f2f2c3;} not #bltable td.op td {background-color:#f2f2c3;}

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

回答5:

#bltable td.op td would select any TDs below td.op, so that's not the selector you're looking for.

Basically, you're running into a specificity problem: your row1 and row2 selectors have one more HTML element in their selectors, so they are more specific and "winning" when compared to your td.op selector; you will need to make your td.op selector as specific (or more specific) than the others so it will be applied:

#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;}

Above, you have an ID, an element with a class, and an element for each selector. That should do it for you.

回答6:

Change your class tag to an id tag, then use some javascript underneath it to color it in:

<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>

回答7:

The td after the td.op is wrong because there are no nested TDs. I would instead add !important after td.op, should do it.

(i'm writing this with a smartphone, so I can't test it, sorry)