У меня есть таблица, которая переключает цвет строки с помощью стиля
<style>
tr:first-child {background-color: #8BC6FD}
tr:nth-child(2n+3) {background-color: #D4E9FC}
</style>
Отлично работает, но я хочу, чтобы он влиял только на одну таблицу на странице, и у меня есть внешний CSS, который я хочу использовать, а не добавлять стиль на каждую страницу, которая мне нужна.
Поэтому я попытался поместить его на свою страницу CSS, но, как бы я ни делал, он показывает ошибки, в настоящее время у меня есть это.
table.toggle {
tr:first-child background-color: #8BC6FD;
tr:nth-child(2n+3) background-color: #D4E9FC;
}
По идее, я могу использовать это в верхней части таблицы, которую хочу использовать, чтобы она не испортила другие таблицы на странице.
<table class = "toggle" cellpadding = "2" cellspacing = "0">
@ gosi123 нет, мне нужен класс таблицы на моей внешней странице CSS, чтобы я мог применить его к любой таблице, которую мне нужно
Я опубликовал ответ. Ваш синтаксис для записи nthchild
неверен. Пожалуйста, взгляните на мой ответ. Он должен работать.
@ gosi123 да, это работает, просто жду, пока он позволит мне принять ответ через минуту, спасибо
Рад, что это помогло тебе. Спасибо, что ждали принять его в качестве ответа.
Вы забыли заключить в скобки каждое свойство background-color, например, так;
table.toggle {
tr:first-child{
background-color: #8BC6FD;
}
tr:nth-child(2n+3) {
background-color: #D4E9FC;
}
}
Итак, вам нужен класс таблицы .toggle
во внешней таблице стилей. Причина, по которой он показывает ошибку, заключается в том, что ваш код CSS неверен. Вот как вы пишете это для nth child
.
Попробуй это:
.toggle tr:first-child {
background-color: #8BC6FD;
}
.toggle tr:nth-child(2n+3) {
background-color: #D4E9FC;
}
<table class = "toggle">
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>
Убедитесь, что ваша внешняя таблица стилей связана в теге <head>
.
Вы хотите иметь определенный набор CSS только для одной конкретной таблицы? Это то, что вы хотите?