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

随机推荐

nunjucks如何使用？
基本的使用 const nunjucks = require('nunjucks') // nunjucks.configure({ autoescape: true }); // const res ...
【转】Servlet 九大对象和四个作用域
隐式对象说明 request 转译后对应HttpServletRequest/ServletRequest对象 response 转译后对应HttpServletRespons/ServletRes ...
Android中的Service基础
Service主要用于后台程序和跨进程访问,可以在不显示界面的前提下完成任务,不影响用户的其他操作. 这里我展示一些基本的用法新建一个Service类 package com.example.ser ...
linux查找含有xxx内容的文件
find . -name *.json |xargs grep "6379" |awk '{print $1}'|uniq
UVA10791-Minimum Sum LCM(唯一分解定理基本应用)
原题:https://vjudge.net/problem/UVA-10791 基本思路:1.借助唯一分解定理分解数据.2.求和输出知识点:1.筛法得素数 2.唯一分解定理模板代码 3.数论分析-唯 ...
nginx 配置强制访问https
使用nginx的301状态码 server { listen ; if ($scheme = 'http') { return 301 https://$server_name$requ ...
pip淘宝镜像安装
pip install virtualenvwrapper-win pip install -i https://pypi.tuna.tsinghua.edu.cn/simple virtualenv ...
eXosip和osip详解
文档可以查看exosip osip的在线文档 http://www.antisip.com/doc/ 在线文档一般先看mainpage 会有库的一个整体说明. 其次看看 modules 会有一些使 ...
135.在django中操作cookie
操作cookie 设置cookie 设置cookie是设置值给浏览器的,因此我们可以通过response的对象来设置,可以通过HttpResponse的对象或者是HttpResponseBase的子类 ...
小白的java学习之路 “ 类和对象”
一.※ 万物皆对象二.对象的两个特征: 属性:对象具有的各种特征方法:对象执行的操作对象:用来描述客观事物的一个实体,由一组属性和方法构成三.封装: 对象同时具有属性和方法两项特性对象的属性 ...

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

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

随机推荐

热门专题