• css和js处理隔行换色的问题


     

     
    1. <html>  
    2.     <head>  
    3.         <meta charset="utf-8">  
    4.         <meta name="" content="content">  
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>  
    6.         <title></title>  
    7.         <link rel="stylesheet" type="text/css" href="">  
    8.         <script src="js/jquery1.8.3.min.js"></script>  
    9.     </head>  
    10.     <script>  
    11.         /*$(document).ready(function(){  
    12.             $('.product_tit:even').css({"color":"#21c178"});  
    13.             $('.product_tit:odd').css({"color":"#459ee6"});  
    14.         })*/  
    15.     </script>  
    16. <div<span style="white-space:pre">   </span><style>  
    17.   <span style="white-space:pre">      </span>#list2:nth-of-type(odd) .product_tit{color:#21c178}  
    18.   <span style="white-space:pre">      </span>#list2:nth-of-type(even) .product_tit{color:#459ee6}  
    19. <span style="white-space:pre">  </span></style</div>   <body>  
    20.         <style type="text/css">   
    21.         .list1:nth-of-type(odd){ color:#ffcc00;}  
    22.         .list1:nth-of-type(even){ color:#00ccff;}  
    23.         </style>   
    24.         <div>   
    25.             <ul>   
    26.                 <li class="list1">111111111111111111111111111</li>   
    27.                 <li class="list1">222222222222222222222222222</li>   
    28.                 <li class="list1">333333333333333333333333333</li>   
    29.                 <li class="list1">444444444444444444444444444</li>   
    30.                 <li class="list1">555555555555555555555555555</li>   
    31.                 <li class="list1">666666666666666666666666666</li>   
    32.             </ul>   
    33.         <hr />   
    34.         <div id="list2">  
    35.             <div class="product_tit">7777777777777777777777777777</div>  
    36.         </div>  
    37.         <div id="list2">  
    38.             <div class="product_tit">8888888888888888888888888888</div>  
    39.         </div>  
    40.         <div id="list2">  
    41.             <div class="product_tit">9999999999999999999999999999</div>  
    42.         </div>  
    43.         <div id="list2">  
    44.             <div class="product_tit">0000000000000000000000000000</div>  
    45.         </div>  
    46.         <div id="list2">  
    47.             <div class="product_tit">7777777777777777777777777777</div>  
    48.         </div>  
    49.         </div>  
    50.     </body>  
    51. </html>  

    备注:自己添加jquery

    错误的css:

    [html] view plain copy
     
    1. <style>  
    2.     .product_tit:nth-of-type(odd){color:#21c178}  
    3.     .product_tit:nth-of-type(odd){color:#459ee6}  
    4. </style>  
    错误的原因:class=product_tit的每个元素都没有兄弟节点,nth-of-type并不会起作用 


     
     
  • 相关阅读:
    js 能实现监听F5页面刷新子iframe 而父页面不刷新
    Thinkpad X201 Gobi2000 上电信3G网络
    【M30】代理类
    C++数组
    【M27】要求或者禁止对象产生于heap之中
    C++ delete operator做了什么事
    【M33】将非尾端类设计为抽象类
    【M32】在未来时态下发展程序
    【M34】如何在同一个程序中结合C++和C
    【M25】将构造方法和非成员方法虚化
  • 原文地址:https://www.cnblogs.com/lsongyang/p/7493699.html
Copyright © 2020-2023  润新知