- <html>
- <head>
- <meta charset="Utf-8">
- <meta name= "" content="Content">
- <meta name="viewport" content= "width=device-width, initial-scale=1.0,maximum-scale= 1.0, User-scalable=no "/>
- <title></title>
- <link rel="stylesheet" type= "text/css" href= ">
- <script src="Js/jquery1.8.3.min.js"></script>
- </head>
- <script>
- /*$ (document). Ready (function () {
- $ ('. Product_tit:even '). css ({"Color": "#21c178"});
- $ ('. Product_tit:odd '). css ({"Color": "#459ee6"});
- })*/
- </Script>
- <div> <span style="White-space:pre"> </span> <style>
- <span style="White-space:pre"> </span> #list2: Nth-of-type (Odd). Product_tit{color: #21c178}
- <span style="White-space:pre"> </span> #list2: Nth-of-type (even) . Product_tit{color: #459ee6}
- <span style="White-space:pre"> </span></style> </Div> <body>
- <style type="Text/css">
- . List1:nth-of-type (odd) {color: #ffcc00;}
- . List1:nth-of-type (even) {color: #00ccff;}
- </style>
- <div>
- <ul>
- <li class="List1">111111111111111111111111111</li>
- <li class="List1">222222222222222222222222222</li>
- <li class="List1">333333333333333333333333333</li>
- <li class="List1">444444444444444444444444444</li>
- <li class="List1">555555555555555555555555555</li>
- <li class="List1">666666666666666666666666666</li>
- </ul>
- <hr />
- <div id="List2">
- <div class="Product_tit">7777777777777777777777777777</div>
- </div>
- <div id="List2">
- <div class="Product_tit">8888888888888888888888888888</div>
- </div>
- <div id="List2">
- <div class="Product_tit">9999999999999999999999999999</div>
- </div>
- <div id="List2">
- <div class="Product_tit">0000000000000000000000000000</div>
- </div>
- <div id="List2">
- <div class="Product_tit">7777777777777777777777777777</div>
- </div>
- </div>
- </Body>
- </html>
Note: Add jquery yourself
The wrong CSS:
[HTML]View PlainCopy
- <style>
- . Product_tit:nth-of-type (odd) {color: #21c178}
- . Product_tit:nth-of-type (odd) {color: #459ee6}
- </style>
Cause of the error: each element of Class=product_tit has no sibling node, Nth-of-type does not work
CSS and JS processing the problem of interlaced color change
