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

<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>

备注：自己添加jquery

错误的css：

<style>
.product_tit:nth-of-type(odd){color:#21c178}
.product_tit:nth-of-type(odd){color:#459ee6}
</style>

错误的原因：class=product_tit的每个元素都没有兄弟节点，nth-of-type并不会起作用

css和js处理隔行换色的问题的更多相关文章

js之隔行换色
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
js表格隔行换色和hover效果
 <script src="js/jquery.min.js" language="javascript">< ...
原生js实现音乐列表（隔行换色、全选）
一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...
JS给TR隔行换色，鼠标经过有动感
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...
利用JS动态生成隔行换色HTML表格
用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...
纯CSS隔行换色
原文:纯CSS隔行换色 <head> <meta http-equiv="Content-Type" content="text/html; chars ...
js课程 4-11 表格如何实现隔行换色
js课程 4-11 表格如何实现隔行换色一.总结一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...
JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等
很多功能都可以放在js的工具类中,在使用的时候直接调用本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中 1.隔行换色 2.复选框的全选效果 3.实现表格 ...
JS应用实例4：表格隔行换色
HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

随机推荐

phpcms v9全站点击量排行代码
前台: <ul> {pc:content action="sitehits" siteid="1" num="10" order ...
WPF 释放嵌入资源
资源文件名称:默认命名空间.文件名 || 默认命名空间.文件夹名.文件名 /// <summary> /// 提取文件 /// </summary> /// <param ...
linux笔记-硬件命令【2】
1- 磁盘 1.1- 查看电脑磁盘类型 cat /sys/block/sda/queue/rotational 0 #固态盘 cat /sys/block/sdb/queue/rotational 1 ...
PAT (Basic Level) Practice （中文）1076 Wifi密码 (15 分)
下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答,每两日一 ...
Android_ExpandableListView
实现效果: 类似于QQ联系人列表相关属性: android:childDivider:指定各组内子类表项之间的分隔条,图片不会完全显示, 分离子列表项的是一条直线 android:childIndi ...
Costco这样的超级零售商，能不能干掉电商？
名创优品创始人叶国富曾说过,Costco只是没有来到中国(大陆),如果它来了,中国现在的零售业全部都会"死光".叶国富的话,似乎一语成箴. 随着Costco正式入华,其正在彻底搅动 ...
使用Vue实现一个树组件
HTML代码: <!DOCTYPE html> <html> <head> <title>Vue Demo</title> <meta ...
springboot里面的缓存注解
https://blog.csdn.net/u012240455/article/details/80844361 https://lfvepclr.gitbooks.io/spring-framew ...
splice删除元素后返回的是一个数组
let arr = [51,68,98,78];let result = arr.splice(1,1);//[68]let arr2 = [51,68,98,78];let result2 = ar ...
Struts2-057远程代码执行漏洞(s2-057/CVE-2018-11776)复现
参考了大佬的链接:https://github.com/jas502n/St2-057 00x01前言 Apache Struts是美国阿帕奇(Apache)软件基金会负责维护的一个开源项目,是一套用 ...

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

css和js处理隔行换色的问题的更多相关文章

随机推荐

热门专题