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

随机推荐

Java 【循环语句】
一.java循环语句分支二.for循环在java中for循环和C的循环用法一样 public class demo{ public static void main(String[] args){ ...
Pr常用的键盘操作
Pr常用的键盘操作 Shift选中切开的小段 Alt复制效果
c++精度
vim和emacs
vim和emacs 在编程界一直有两大神器的传说.这两大神器一个是emacs,一个是vim.一个是神的编辑器,一个是编辑器之神. 程序员的圈子里面也一直流传着一个段子,说是世界上的程序员分为三种.使用 ...
EF Code-First（Oracle）通过Migration来更新数据库的表的字段
关于Oracle中使用Entity Framework 6.x Code-First方式开发,请参考博客(菩提树下的杨过)https://www.cnblogs.com/yjmyzz/p/how-to ...
.netCore MVC View 如何不使用模板
默认情况下, 新建的View都是默认加载模板 _Laytou.cshtml 文件的,这是因为在 _ViewStart.cshtml 中定义了. 如果不需要加载模板文件,有两种方法 1. 在单独的Vie ...
看完它，你就全懂了十大Wifi芯片原厂！
看完它,你就全懂了十大Wifi芯片原厂! 来源:全球物联网观察概要:不知不觉中,WiFi几乎已攻占了整个世界.现在只要你上网,可能就离不开WiFi了. 2014年是物联网WiFi市场关键的转折期 ...
Java工程师的必备知识点
最近参加了一次公司内部的调岗计划,打算加入一个更核心的部门.调岗计划有面试环节,为了不让自己搞砸,悉心准备了将近一个月,请教了百度和腾讯的有过面试官经验的大学同学,系统性的总结了Java工程师的核心知 ...
在Scala中免费验证
优锐课带你详细了解如何在Scala中实施免费的monad验证.抽丝剥茧,细说架构那些事! 由于业务数据的复杂性,已经在数据验证上花费了很多精力.在Scala中,提出了使用应用程序进行验证的方法,并被广 ...
smarty文章字符截取
{%$data.dealer_info.address|replace:' ':''|cutstr:58%} cutstr:58

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

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

随机推荐

热门专题