Javascript 倒计时时，风格不适用于ul li

样式不适用于

ul li

。。。它只显示，没有任何样式。
我正在用JavaScript创建时间倒计时，但它不起作用……
JavaScript函数正在工作，但my

ul li

无法获取输出样式

<style type="text/css">
    ul#countdown li {
        display: inline-block;
        width: 54px;
        margin-bottom: 4em;
        text-align: center;
        /*padding-top: 20px;*/
        background: black;
        background-repeat: repeat;
    }

    ul#countdown li span {
        font-size: 3em;
        font-weight: bold;
        color: #FFFFFF;
        height: 50px;
        line-height: 50px;
        position: relative;
    }

    ul#countdown li span::before {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        top: 31px;
    }

    ul#countdown li p.timeRefDays,
    ul#countdown li p.timeRefHours,
    ul#countdown li p.timeRefMinutes,
    ul#countdown li p.timeRefSeconds {
        /*margin-top: 1em;*/
        color: #a89256;
        text-transform: uppercase;
        font-size: .875em;
    }
    .timer-area .logo img {
        background: #FFFFFF;
        padding: 10px;
    }

</style>
<script>

function CountDownTimer(dt, id) {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {
                clearInterval(timer);
                document.getElementById(id).innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

//            document.getElementById(id).innerHTML = days + 'days ';
//            document.getElementById(id).innerHTML += hours + 'hrs ';
//            document.getElementById(id).innerHTML += minutes + 'mins ';
//            document.getElementById(id).innerHTML += seconds + 'secs';

            document.getElementById(id).innerHTML = "<ul id='countdown'>";
            document.getElementById(id).innerHTML += "<li><span class='days'>days</span>";
            document.getElementById(id).innerHTML += "<p class='timeRefDays'>"+ days +"</p>";
            document.getElementById(id).innerHTML += "<li>";
            document.getElementById(id).innerHTML += "<li><span class='hours'>hours</span>";
            document.getElementById(id).innerHTML += "<p class='timeRefHours'>"+ hours +"</p>";
            document.getElementById(id).innerHTML += "</li>";
            document.getElementById(id).innerHTML += "<li> <span class='minutes'>minutes</span>";
            document.getElementById(id).innerHTML += "<p class='timeRefMinutes'>"+ minutes +"</p>";
            document.getElementById(id).innerHTML += "</li>";
            document.getElementById(id).innerHTML += "<li> <span class='seconds'>seconds</span>";
            document.getElementById(id).innerHTML += "<p class='timeRefSeconds'>"+ seconds +"</p>";
            document.getElementById(id).innerHTML += "</li>";
            document.getElementById(id).innerHTML += "</ul>";
        }
        timer = setInterval(showRemaining, 1000);
    }
</script>

<div class="row">
    <!-- <h3>New Products</h3> --> 
    <?php //if ($this->getProducts()->getSize() > '0') { ?>

        <?php foreach ($this->getProducts() as $_Product) { ?> 

            <?php //echo $timespan = strtotime($_Product['special_to_date']) - strtotime($_Product['special_from_date']);exit; ?>
            <div style="float: left; margin-left: 10px;">
                <div><a href="<?php echo $_Product->getProductUrl(); ?>"><img src="<?php echo $this->helper('catalog/image')->init($_Product, 'small_image')->resize(145, 200) ?>" alt="<?php echo $_Product->getName(); ?>"></a></div>
                <div align="center"><h4><?php echo $_Product->getName(); ?></h4></div>
                <div align="center"><?php echo Mage::helper('core')->formatPrice($_Product->getPrice()); ?></div>
                <?php //echo "<pre>"; print_r($_Product->toArray());exit; ?>


                <script>
                    CountDownTimer("<?php echo $_Product['special_to_date'] ?>", "newcountdown<?php echo $_Product['sku']; ?>");
                </script>
                <div id="newcountdown<?php echo $_Product['sku']; ?>">

                </div>
            </div>
        <?php } ?>
    <?php //} ?>
</div>

ul#倒计时李{
显示：内联块；
宽度：54px；
边缘底部：4em；
文本对齐：居中；
/*填充顶部：20px*/
背景：黑色；
背景重复：重复；
}
ul#倒计时李跨度{
字号：3em；
字体大小：粗体；
颜色：#FFFFFF；
高度：50px；
线高：50px；
位置：相对位置；
}
ul#倒计时李跨度：：之前{
内容：''；
宽度：100%；
高度：1px；
位置：绝对位置；
顶部：31px；
}
ul#倒数李p.timeRefDays，
ul#倒数李p.TimeRef小时，
ul#倒数李p.TimeRef分钟，
ul#倒计时li p.timeRefSeconds{
/*边缘顶部：1米*/
颜色：#a89256；
文本转换：大写；
字体大小：.875em；
}
.计时器区域.徽标img{
背景：#FFFFFF；
填充：10px；
}
功能倒计时（dt，id）{
var结束=新日期（dt）；
var_秒=1000；
var _minute=_second*60；
变量(小时)=(分钟)*60 ;；
var _日=_小时*24；
无功定时器；
函数showLeving（）{
var now=新日期（）；
var距离=结束-现在；
如果（距离<0）{
清除间隔（计时器）；
document.getElementById（id）.innerHTML='EXPIRED！'；
返回；
}
var天数=数学楼层（距离/天数）；
var小时=数学楼层（（距离%\u天）/\u小时）；
var分钟=数学楼层（距离%\u小时）/\u分钟）；
var秒=数学楼层（（距离%\u分钟）/\u秒）；
//document.getElementById（id）.innerHTML=days+'days'；
//document.getElementById（id）.innerHTML+=hours+'hrs'；
//document.getElementById（id）.innerHTML+=minutes+'mins'；
//document.getElementById（id）.innerHTML+=seconds+'secs'；
document.getElementById（id）.innerHTML=“
”；
document.getElementById（id）.innerHTML+=“
days”；
document.getElementById（id）.innerHTML+=“
”+days+”
”；
document.getElementById（id）.innerHTML+=“
”；
document.getElementById（id）.innerHTML+=“
hours”；
document.getElementById（id）.innerHTML+=“
”+hours+”
”；
document.getElementById（id）.innerHTML+=“
”；
document.getElementById（id）.innerHTML+=“
minutes”；
document.getElementById（id）.innerHTML+=“
”+minutes+”
”；
document.getElementById（id）.innerHTML+=“
”；
document.getElementById（id）.innerHTML+=“
seconds”；
document.getElementById（id）.innerHTML+=“
”+seconds+”
”；
document.getElementById（id）.innerHTML+=“
”；
document.getElementById（id）.innerHTML+=“
”；
}
定时器=设置间隔（显示剩余，1000）；
}
倒计时器（“新倒计时”）；
您编写
document.getElementById（id）.innerHTML=“
”的方式
标记立即关闭，外部有
元素，将其更改为1个字符串，而不是应用所有+=和CSS格式，并在正确位置关闭

从

document.getElementById（id）.innerHTML=“
”；
document.getElementById（id）.innerHTML+=“
days”；
document.getElementById（id）.innerHTML+=“
”+days+”
”；
document.getElementById（id）.innerHTML+=“
”；
document.getElementById（id）.innerHTML+=“
hours”；
document.getElementById（id）.innerHTML+=“
”+hours+”
”；
document.getElementById（id）.innerHTML+=“
”；
document.getElementById（id）.innerHTML+=“
minutes”；
document.getElementById（id）.innerHTML+=“
”+minutes+”
”；
document.getElementById（id）.innerHTML+=“
”；
document.getElementById（id）.innerHTML+=“
seconds”；
document.getElementById（id）.innerHTML+=“
”+seconds+”
”；
document.getElementById（id）.innerHTML+=“
”；
document.getElementById（id）.innerHTML+=“
”；

到

document.getElementById（id）.innerHTML=“
”+
“
天”+
“
”+天+”
”+
“
”+
“
小时”+
“
”+hours+“
”+
“
”+
“
分钟”+
“
”+minutes+“
”+
“
”+
“
秒”+
“
”+秒+“
”+
“
”+
“
”

演示：
您可以创建一个没有PHP函数的工作fiddle，只是简单的html。除此之外，您应该保存要添加到变量中的html，并且只执行一次DOM调用。此外，当javascript调用对当时还不存在的id进行更改时（在编写div之前调用JS），这也不起作用。这个代码有很多错误<代码>对齐=居中

在divs上？一切都基于身份证？@Sebsemillia是的，确定你想要什么？既然它不起作用，你有一个

 document.getElementById(id).innerHTML = "<ul id='countdown'>";
            document.getElementById(id).innerHTML += "<li><span class='days'>days</span>";
            document.getElementById(id).innerHTML += "<p class='timeRefDays'>"+ days +"</p>";
            document.getElementById(id).innerHTML += "<li>";
            document.getElementById(id).innerHTML += "<li><span class='hours'>hours</span>";
            document.getElementById(id).innerHTML += "<p class='timeRefHours'>"+ hours +"</p>";
            document.getElementById(id).innerHTML += "</li>";
            document.getElementById(id).innerHTML += "<li> <span class='minutes'>minutes</span>";
            document.getElementById(id).innerHTML += "<p class='timeRefMinutes'>"+ minutes +"</p>";
            document.getElementById(id).innerHTML += "</li>";
            document.getElementById(id).innerHTML += "<li> <span class='seconds'>seconds</span>";
            document.getElementById(id).innerHTML += "<p class='timeRefSeconds'>"+ seconds +"</p>";
            document.getElementById(id).innerHTML += "</li>";
            document.getElementById(id).innerHTML += "</ul>";

    document.getElementById(id).innerHTML = "<ul id='countdown'>" +
        "<li><span class='days'>days</span>" +
        "<p class='timeRefDays'>" + days + "</p>" +
        "<li>" +
        "<li><span class='hours'>hours</span>" +
        "<p class='timeRefHours'>" + hours + "</p>" +
        "</li>" +
        "<li> <span class='minutes'>minutes</span>" +
        "<p class='timeRefMinutes'>" + minutes + "</p>" +
        "</li>" +
        "<li> <span class='seconds'>seconds</span>" +
        "<p class='timeRefSeconds'>" + seconds + "</p>" +
        "</li>" +
        "</ul>"