CSS и переопределяющие стили на вложенных элементах работают только частично - PullRequest
Новая
       0

CSS и переопределяющие стили на вложенных элементах работают только частично

0 голосов
/ 16 февраля 2011

Меня интересует следующий код: 

<html>
        <head>
        <title>Test HTML</title>
        <link rel="stylesheet" type="text/css" href="test.css">
        </head>
<body>
<table class=foo cellpadding="2" cellspacing="2">
         <tr>
             <td><b>Contingency Table:</b></td>
             <td><table class=bar border="2" align="left">
                  <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr>
                  <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr>
                  <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr>
               </table>
             </td>
         </tr>
</table>
</body>
</html>

со следующим CSS: 

table {
        border-width: 2px;
        border-spacing: 2px;
        border-style: solid;
        }  

table.bar {
        border-color: red;
        background-color: white;
}

table.bar td {
        background-color: green;
}

table.bar tr {
        background-color: black;
}

table.foo {
        border-color: blue;
        background-color: white;
}

table.foo td {
        border-color: black;
        background-color: yellow;
}

table.foo tr {
        background-color: yellow;
}

Проблема заключается в том, что при обмене классами "foo" и "bar" втаблица и ее вложенная таблица, стиль тегов td установлен неправильно или, по крайней мере, не так, как я ожидал.При переходе от внешнего «bar» и внутреннего «foo» к внешнему «foo» и внутреннему «bar» цвета меняются, как и ожидалось, за исключением цветов элемента td.Что я делаю здесь неправильно, так как другие элементы таблицы изменяются правильно?

Я знаю, что использование table table.foo {...} будет работать, но для этого необходимо знать, какой стиль следует использовать для внутренней / вложенной таблицы иМне не очень нравится эта идея.Я хочу иметь возможность обмениваться стилями при желании и не включать «наследование» в таблицу стилей ... Кроме того, диктовать порядок стилей foo или bar в таблице стилей нежелательно для меня.Пожалуйста, исправьте меня, если это обычная практика HTML / CSS.

Ответы [ 3 ]

3 голосов
/ 16 февраля 2011

CSS - Каскадные таблицы стилей!

Проще говоря, если вы переключаете классы foo и bar в своих таблицах, вам также необходимо переместить правила table.foo css вышеtable.bar классы.

Объяснение Если bar вложено в foo, то правило css table.foo td соответствует обоим tds в таблицах foo и bar,Таким образом, если table.foo td объявлено после правила table.bar td, правило table.foo td перезаписывает table.bar td

2 голосов
/ 16 февраля 2011

xzyfer рассуждения верны. Простой обходной путь может быть добавить 

table table.bar td { background-color: green !important; }

Предполагая, что ваше вложение не превышает 2 уровней, это работает нормально, поскольку оно перекрывает описанный каскадный эффект (т.е. применяемое правило больше не зависит от порядка, в котором определены правила).

Рабочий пример: http://jsfiddle.net/RQCQS/

0 голосов
/ 16 февраля 2011

Если вы хотите, чтобы вы только воздействовали на прямых потомков таблицы foo, вам нужны некоторые дочерние селекторы.Возможно, вам придется поискать их, поскольку я знаю, что они могут быть использованы в качестве обходного пути для старых браузеров.Кроме того, я бы посоветовал добавить tbody к вашей таблице, так как firefox делает это автоматически, и это испортило мое тестирование дочерних селекторов: 

table.foo > tbody > tr > td {
        border-color: black;
        background-color: yellow;
}

table.bar > tbody > tr > td {
        background-color: green;
}

Если вы будете работать в Firefox, вам придется тестировать другие браузеры.Проблема, с которой вы сталкивались, была объяснена в других статьях, но это природа каскадных таблиц стилей, поскольку ваш код изначально был любым тд внутри table.foo, который был вызван стилем table.foo td.В качестве альтернативы вам придется изменить порядок стилей, чтобы вложенные стили всегда переопределяли стили внешней таблицы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...