2016-03-12 2 views
1

Как я могу создать шахматную таблицу, если я не могу изменить HTML-код, добавив только стили в теге STYLE, чтобы привести таблицу в форму, показан на рисунке справа. псевдоселекторы : Not :: nth-child (i) :: nth-child (an + b) :: nth-of-type (i) :: nth-of-type (a + b) не используются.шахматная таблица без псевдо классов

Таблица 10 * 10. Я мог бы создать только зеленую границу. Мне нужна только шахматная разметка (белый и черный).

<style>  
    table.ches td 
    { 
    width: 100px; 
    height: 100px; 
    border: solid black 2px; 
    } 

table.ches tr :first-child{background: green; 
    color: black;} 

    table.ches tr:first-child>td {background: green; 
    color: red;} 

    table.ches tr:last-child>td {background: green; 
    color: black;} 

    table.ches tr :last-child{background: green; 
    color: black;} 

</style> 

<table class="ches"> 
<tbody><tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
<tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
</tr> 
</tbody></table> 

</body> 

ответ

1

Хотя nth-of-type(i) и nth-of-type(an + b) не допускаются, я предполагаю, что это не означает, что nth-of-type(even|odd) вне? Если да, то CSS это просто: сделать все, даже td там внутри даже tr с и все нечетные td S внутри нечетная tr s черный:

tr:nth-of-type(even) td:nth-of-type(even), 
tr:nth-of-type(odd) td:nth-of-type(odd) { 
    background: black; 
} 

Вот рабочий JSFiddle. Ура!

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

  • Нет связанных вопросов^_^