Синтаксис 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
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
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>.

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