Синтаксис css для класса таблицы

У меня есть таблица, которая переключает цвет строки с помощью стиля

<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">

Вы хотите иметь определенный набор CSS только для одной конкретной таблицы? Это то, что вы хотите?

Gosi 26.10.2018 06:50

@ gosi123 нет, мне нужен класс таблицы на моей внешней странице CSS, чтобы я мог применить его к любой таблице, которую мне нужно

Kilisi 26.10.2018 06:52

Я опубликовал ответ. Ваш синтаксис для записи nthchild неверен. Пожалуйста, взгляните на мой ответ. Он должен работать.

Gosi 26.10.2018 06:56

@ gosi123 да, это работает, просто жду, пока он позволит мне принять ответ через минуту, спасибо

Kilisi 26.10.2018 07:00

Рад, что это помогло тебе. Спасибо, что ждали принять его в качестве ответа.

Gosi 26.10.2018 07:01
0
5
29
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы забыли заключить в скобки каждое свойство 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>.

Другие вопросы по теме