Расширенный стиль таблицы ⇐ CSS

[Anonymous]

Требования:
Добавьте следующие правила CSS в файл Styles.css:
Селектор идентификаторов для игровой таблицы идентификаторов должен:
Используйте свойство border, чтобы добавить сплошную рамку толщиной 2 пикселя, используя цвет из переменной CSS --table-color
Используйте свойство text-align, чтобы центрировать весь текст
Используйте высоту 200 пикселей и ширину 400 пикселей
Селектор-потомок, нацеленный на внутреннюю часть, должен:
Использовать свойство text-transform, чтобы сделать заголовок ПРОПИСНЫМ РЕГИСТРОМ
Установить цвет фона с помощью переменной CSS --table-color
Установите белый цвет шрифта
Добавьте отступы в 10 пикселей
Селектор псевдокласса :nth-child(even ) for must:
Установите цвет фона с помощью переменной CSS --row-bg-color.
Это единственные неудачные тесты:1: Модульный тест
0 / 1
Тест для селектора-потомка «заголовок таблицы»
Обратная связь
Существует селектор-потомок «заголовок таблицы»Ваше значение
false
Ожидаемое значение
true
2: Модульный тест
0 / 3
Проверка стилей селектора потомков заголовкаОтзыв
Существует селектор потомка «заголовок таблицы»
Ваше значение
false
Ожидаемое значение
true
Тест прерван.
3: Модульный тест
0 / 2
Тест: стили псевдоселектора nth-child
Обратная связь
селектор tr:nth-child(even) существует
Ваше значение
false
Ожидаемое значение
true
Тест прерван.
Я попытался решить это задание, изменив CSS для стилизации таблицы, заголовка и чередующихся строк. Я также использовал переменные CSS для цветов, применил выравнивание текста и соответствующим образом стилизовал ссылки.
Это мой HTML-код, который уже задан и не может быть изменен

Код: Выделить всё

Best-Selling Video Games




Best-Selling Video Games

Title
Sales
Release Date


Minecraft
176,000,000
November 18, 2011


Tetris
170,000,000
June 6, 1984


Grand Theft Auto V
110,000,000
September 17, 2013


Wii Sports
82,870,000
November 19, 2006



Source: [url=https://en.wikipedia.org/wiki/List_of_best-selling_video_games]Wikipedia[/url]

это мой CSS-код, который нужно исправить или отредактировать:

Код: Выделить всё

:root {
--table-color: forestgreen;
/* Forestgreen for table header and border */
--row-bg-color: honeydew;
/* Honeydew for alternating rows */
font-family: Calibri, Myriad;
/* Font family */
--link-color: darkviolet;
/* Set the link color to dark purple */
}

/* Game table ID selector */
#game-table {
width: 400px;
border-collapse: collapse;
background-color: #ffffff;
border: 2px solid var(--table-color);
/* Forestgreen border */
text-align: center;
/* Center align the table content */
height: 200px;
/* Explicitly set the height to 200px */
}

/* Table caption styles */
#game-table caption {
background-color: var(--table-color);
/* Forestgreen background for caption */
color: white;
font-weight: bold;
padding: 10px;
text-transform: uppercase;
/* Uppercase the caption text */
text-align: center;
/* Center align the caption text */
}

/* Table header styles */
#game-table th {
background-color: var(--table-color);
/* Forestgreen background for headers */
color: white;
padding: 10px;
text-align: center;
/* Center align the headers */
font-weight: bold;
}

/* Table data cell styles */
#game-table td {
border: 1px solid #cccccc;
/* Light gray border for table cells */
padding: 10px;
text-align: center;
/* Center align the data cells */
}

/* Apply alternating row colors using variable */
#game-table tr:nth-child(even) {
background-color: var(--row-bg-color);
/* Honeydew background for even rows */
}

/* Apply solid border for all rows */
#game-table tr {
border: 1px solid var(--table-color);
/* Forestgreen border for table rows */
}

/* Link styling - dark violet with underline */
a {
color: var(--link-color);
/* Set the link color to dark violet */
text-decoration: underline;
/* Ensure the link is underlined */
}

введите здесь описание изображения

Подробнее здесь: https://stackoverflow.com/questions/790 ... le-styling