Стилизация отдельной ячейки таблицы

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), которые меняют каждую строку (стиль шахматной доски). В таблице также есть строка «Аромат месяца» с дополнительным третьим цветом. Наконец, в таблице есть один td class = "op", который будет четвертым цветом.

Проблема, с которой я столкнулся, состоит в том, что row1, row2 и класс fotm переопределяют цвет класса op, а четвертый цвет не отображается. Могу ли я написать это по-другому, чтобы заставить его работать?

Я пробовал:

#bltable tr.row1 

(без "td" в конце) но тогда я вообще не получаю цвет строки, видя, что "X не наследуется. Он применяется к тегу включения"

Кроме того, я не уверен, нужно ли иметь дополнительный «td» в конце

#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

Измените тэг своего класса на тэг 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 3

Значение td после td.op неверно, потому что нет вложенных TD. Я бы вместо этого добавил! Важный после td.op, должен это сделать.

(я пишу это со смартфона, поэтому не могу его проверить, извините)

Answer 4

#bltable td.op td выберет любой TD s ниже td.op, так что это не тот селектор, который вы ищете.

По сути, вы сталкиваетесь с проблема специфичности : у ваших селекторов row1 и row2 есть еще один элемент HTML в их селекторах, поэтому они более специфичны и «выигрывают» по сравнению с вашим селектором 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;}

Выше у вас есть идентификатор, элемент с классом иэлемент для каждого селектора.Это должно сделать это для вас.

Answer 5

Ваш <td class="op"> должен иметь стиль #bltable td.op {background-color:#f2f2c3;}, а не #bltable td.op td {background-color:#f2f2c3;}

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

Answer 6

Вы должны использовать это:

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

Вы правы, дополнительный "тд" не нужен.

Answer 7

Ваше правило неверно.Должно быть:

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

или

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