css无法实现分行显示颜色的问题

<head>
<style type="text/css"> 
      lay2.01{
      background-color:#CCFF00; border:thick
  }
  lay2.02{
     background-color:#66FF99; border:thick
  }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
  <script language="javascript">
    function getStretchDraw(){
  var subject=document.getElementById("lay1")
  if(subject.innerText=="+"){
       lay2.style.display="block";
   subject.innerHTML="-";
   
  }else{
    lay2.style.display="none";
subject.innerText="+";

  }
}
  </script>
  </head><body>
<span id="lay1" style="border:thinridge;cursor:hand" onclick="getStretchDraw()">-</span>list1<br> 
   <ul id="lay2">
       <li class="01">语文</li>
       <li class="02">数学</li>
       <li class="01">英语</li>
   <li class="02">自渊</li>
   <li class="01">化学</li>
   <li class="02">生物</li>
   
   </ul>
list2
</body>
</html>
上面是测试分行显示颜色的界面，为什么样式表无法显示，有什么错误？？？？

解决方案 »

  1.   

    这儿我粘贴有误  lay2.01  lay2.02 中去掉lay2，任然不能显示样式表
      

  2.   

    <head>
    <style type="text/css">
    #lay2 .s01 {
    background-color: #CCFF00;
    border: thick;
    }#lay2 .s02 {
    background-color: #66FF99;
    border: thick;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script language="javascript">
    function getStretchDraw() {
    var subject = document.getElementById("lay1")
    if (subject.innerText == "+") {
    lay2.style.display = "block";
    subject.innerHTML = "-"; } else {
    lay2.style.display = "none";
    subject.innerText = "+";
    }
    }
    </script></head>
    <body>
    <span id="lay1" style="border: thinridge; cursor: hand"
    onclick="getStretchDraw()">-</span>list1
    <br>
    <ul id="lay2">
    <li class="s01">语文</li>
    <li class="s02">数学</li>
    <li class="s01">英语</li>
    <li class="s02">自渊</li>
    <li class="s01">化学</li>
    <li class="s02">生物</li> </ul>
    list2
    </body>
    </html>
    li下的Id是数据，选择器解析会出现错误。
      

  3.   

    window.onload = function() {
    var oDiv = document.getElementById("lay2");
    var oP = oDiv.getElementsByTagName("li");var color = "";
    var i = 0;
    for (i = 1; i <= oP.length-1; i++) {
    if (i % 2 == 0)
    {
    oP[i].style.backgroundColor="red";
    }
    else
    {
    oP[i].style.backgroundColor= "blue";
    }
    }
    };
      

  4.   

    for(i=1;i<=oP.length-1;i++) 
       {
      if(i%2==0)
      oP[i].style.color = "red";改字体的颜色
      else
      oP[i].style.color = "blue";
      }
      

  5.   

    <style type="text/css">  
     #lay2.01{
     background-color:#CCFF00; border:thick
     }
     #lay2.02{
     background-color:#66FF99; border:thick
     }
    </style>
    这段少一个#，不上就行