Я отредактировал css для часов обратного отсчета, но они не отображаются

Question

Я отредактировал css для моего countdown timer, но он не появился.

Я хочу отредактировать css для каждой hour, minute и second ячейки.

Пожалуйста, помогите мне.

это есть ссылка

const span = document.getElementById("countdown");
const deadline = new Date();
deadline.setHours(0);
deadline.setMinutes(0);
deadline.setSeconds(0);
function displayRemainingTime() {
	if (deadline < new Date()) deadline.setDate(deadline.getDate() + 1);
	const remainingTime = deadline - new Date();
	const extract = (maximum, factor) => Math.floor((remainingTime % maximum) / factor);
	let seconds = extract(60000, 1000);
	let minutes = extract(3600000, 60000);
	let hours = extract(10800000, 3600000);
	if (hours < 10) { hours = "0" + hours; }
	if (minutes < 10) { minutes = "0" + minutes; }
	if (seconds < 10) { seconds = "0" + seconds; }
	const string = `${hours} hours ${minutes} minutes ${seconds} seconds remaining`;
	span.innerText = `${hours} hours ${minutes} minutes ${seconds} seconds`;
}
window.setInterval(displayRemainingTime, 1000);
displayRemainingTime();

span#minutes {
	background: #fff;
	font-size: 18px;
	border-radius: 2px;
}

span#hours {
	background: #fff;
	font-size: 18px;
	border-radius: 2px;
}

span#seconds {
	background: #fff;
	font-size: 18px;
	border-radius: 2px;
}

<div id="countdown">
<span id="hours"> 00</span> :
<span id="minutes"> 00</span> :
<span id="seconds"> 00</span>

Answer 1

Ну, innerText заменит все содержимое вашего #countdown элемента. Следующий код работает:

const span = document.getElementById("countdown");
const deadline = new Date();
deadline.setHours(0);
deadline.setMinutes(0);
deadline.setSeconds(0);
function displayRemainingTime() {
    if (deadline < new Date()) deadline.setDate(deadline.getDate() + 1);
    const remainingTime = deadline - new Date();
    const extract = (maximum, factor) => Math.floor((remainingTime % maximum) / factor);
    let seconds = extract(60000, 1000);
    let minutes = extract(3600000, 60000);
    let hours = extract(10800000, 3600000);
    if (hours < 10) { hours = "0" + hours; }
    if (minutes < 10) { minutes = "0" + minutes; }
    if (seconds < 10) { seconds = "0" + seconds; }
    span.innerHTML = `<span id="hours">${hours}</span> hours <span id="minutes">${minutes}</span> minutes <span id="seconds">${seconds}</span> seconds remaining`;
}
window.setInterval(displayRemainingTime, 1000);
displayRemainingTime();

Другое дело, вам не нужно добавлять span#id-of-the-element, к CSS специфику его иерархии, не требует этого, селектор идентификаторов сильнее, поэтому я предлагаю вам добавить это просто: (добавлено несколько цветов только для демонстрации)

#minutes {
    background: #fff;
    font-size: 18px;
    border-radius: 2px;
    color:green;
}

#hours {
    background: #fff;
    font-size: 18px;
    border-radius: 2px;
    color:blue;
}

#seconds {
    background: #fff;
    font-size: 18px;
    border-radius: 2px;
    color:red;
}

Вот пример JsFiddle: https://jsfiddle.net/fabiangarga/hk428a0n/7/