Таблицы CSS со ссылками со странным поведением цвета

У меня вопрос. Я пытаюсь сделать таблицу CSS с чередующимися цветными строками, например this. Тем не менее, я хочу, чтобы часть содержимого таблицы имела ссылки, и я обнаружил, что фон текста этих ячеек ведет себя странно (а именно, принимая цвет фона неправильной строки для половины строк). Я совершенно новый для CSS, так что, возможно, я делаю очевидную ошибку. Скриншот:Таблицы CSS со ссылками со странным поведением цвета

Funky link bg coloration

И MWE код:

<html> 

    <style type="text/css"> 

    table.t2 { 
    } 
    .t2 th, .t2 td { 
    padding: 4px 8px; 
    background: #fbd7b4; 
    } 

    .t2 tbody tr:nth-child(odd) *:nth-child(even), .t2 tbody tr:nth-child(even) *:nth-child(odd) { 
    background: #f3eddd; 
    } 
</style> 

    <table class="t2" summary="blah"> 
    <caption>hey </caption> 

    <thead> 
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr> 
</thead> 
<tfoot> 
<tr><th colspan="4">double </th></tr> 
</tfoot>- 
<tbody> 
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr> 
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr> 

</tbody> 
</table> 

</body> 
</html>

Любая помощь фиксируя это будет высоко ценится!

источник

2016-03-28 J. Jane

вы изменили Б.Г. цвета TD, но не якорь 'a' - вам нужно добавить еще один набор стилей, подобных этим:' .t2 TBODY тр: п-й ребенок (нечетный) *: nth-child (even) a' – ochi

Я считаю, что это то, что вы хотите ...

Просто исключить элемент из окраски.

<html> 
 

 
    <style type="text/css"> 
 

 
    table.t2 { 
 
    } 
 
    .t2 th, .t2 td { 
 
    padding: 4px 8px; 
 
    background: #fbd7b4; 
 
    } 
 

 
    .t2 tbody tr:nth-child(odd) *:nth-child(even), .t2 tbody tr:nth-child(even) *:nth-child(odd):not(a) { 
 
    background: #f3eddd; 
 
    } 
 
</style> 
 

 
    <table class="t2" summary="blah"> 
 
    <caption>hey </caption> 
 

 
    <thead> 
 
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr> 
 
</thead> 
 
<tfoot> 
 
<tr><th colspan="4">double </th></tr> 
 
</tfoot>- 
 
<tbody> 
 
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr> 
 
<tr><th>A</th><td><a href="google.com">BBB Link</a> </td><td>CCCC</td><td> DDDDD</td></tr> 
 

 
</tbody> 
 
</table> 
 

 
</body> 
 
</html>

источник

2016-03-28 20:11:27 Wowsk

Я думаю, что OP хочет, чтобы каждая другая ячейка чередовала цвета (например, шахматный рисунок) – ochi

Обновленный ответ. – Wowsk

Правильно! Хорошее начало, хотя! –

Вы должны указать цвет фона <a> элемента. Что-то вроде этого:

.t2 th, .t2 td, .t2 td a, .t2 td a { 
    padding: 4px 8px; 
    background: #fbd7b4; 
    } 

    .t2 tbody tr:nth-child(odd) *:nth-child(even), .t2 tbody tr:nth-child(even) *:nth-child(odd) { 
    background: #f3eddd; 
    } 

    .t2 tbody tr:nth-child(odd) *:nth-child(even) a, .t2 tbody tr:nth-child(even) *:nth-child(odd) a{ 
    background: #f3eddd; 
    }

источник

2016-03-28 20:15:26 87387264223462

Таблицы CSS со ссылками со странным поведением цвета

ответ

Смежные вопросы