css3隔行变换色实现示例
<style>
#list1 li:nth-of-type(odd){ background:#00ccff;}/*奇数行*/
#list1 li:nth-of-type(even){ background:#ffcc00;}/*偶数行 */
#list2 li:nth-child(4n+1){ background:#00ccff;}/*从第一行开始算起 每隔4个(包含第四个)使用此样式 */
#list00000 li:nth-child(4n+2){background:#090;}/*从第二行开始算起 每隔4个(包含第四个)使用次样式 */
#list00000 li:nth-child(4n+3){background:#009;}/*从第三行开始算起 每隔4个(包含第四个)使用次样式 */
#list00000 li:nth-child(4n+4){background:#990;}/*从第四行开始算起 每隔4个(包含第四个)使用次样式 */
</style>
<div>
<ul id="list1">
<li>1111111</li>
<li>222222222222</li>
<li>333333333</li>
<li>44444444</li>
<li>55555555555555</li>
<li>66666666666666666</li>
</ul>
<hr />
<ul id="list2">
<li>1111111</li>
<li>222222222222CSS3</li>
<li>333333333</li>
<li>44444444</li>
<li>55555555555555</li>
<li>66666666666666666</li>
</ul>
</div>
css3隔行变换色实现示例的更多相关文章
- 纯CSS隔行换色
原文:纯CSS隔行换色 <head> <meta http-equiv="Content-Type" content="text/html; chars ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- php29号小结(隔行换色······)
1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background ...
- table隔行换色
以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...
- CSS3 3D变换
可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- JQuery 表格 隔行换色 和鼠标滑过的样式
$(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery实现table隔行换色和鼠标经过变色
一.隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even& ...
随机推荐
- :last-child
匹配最后一个子元素 :last只匹配最后一个元素,而此选择符将为每个父元素匹配最后一个子元素 示例 描述: 在每个 ul 中查找最后一个 li HTML 代码: <ul> <li&g ...
- usermod
环境: [root@vm-xiluhua][/]# cat /etc/redhat-release CentOS Linux release (Core) usermod usage:(本人使用的版本 ...
- 精彩的javascript对象和数组混合相加
最近遇到一个让人困解的一个问题:一个简单的js加法运算表达式: +[]; //这里加上一个空数组得到什么???答案:'1'; 为什么答案是1,一开始我也很困惑:后来我读了一篇文章才知道:在javasc ...
- html与jsp
1. 什么是 HTML 语言? HTML文件有什么特征? 答:HTML是超文本标记语言(Hypertext Mark-up Language)的缩写,主要用来创建与系统平台无关的网页文档.它是目前网络 ...
- YTU 3023: 树的遍历
原文链接:https://www.dreamwings.cn/ytu3023/2617.html 3023: 树的遍历 时间限制: 1 Sec 内存限制: 128 MB 提交: 3 解决: 2 题 ...
- Windows下WebStorm使用SVN
安装了phpstorm之后,想配置svn,结果在file->settings->Version Contorl->subversion->use conmand line cl ...
- Linux常见命令汇总
1.rz sz上传下载 若未安装使用:yum install lrzsz 安装 上传: rz 覆盖上传: rz -y 下载: sz bbb.jpg
- OGNL_一点
ognl此表达式语言,是一门什么样的语言呢?下面然我为大家简单的讲解一点小小的关于它的内容吧! 然我来简单得解释说:OGNL(Object-Graph Navigation Language),可以方 ...
- 2015年江西理工大学C语言程序设计竞赛(高级组)
A 解法:DP+二分 dp[i]=max(dp[i],dp[j]+p[i].v)(i>j) dp[i]表示建立i点之后能够获得的最大值 int n,M; struct node { int l, ...
- 不用安装Oracle_Client就能使用PLSQL_Developer
1. 下载oracle的客户端程序包(30M) 只需要在Oracle官方网站下载一个叫Instant Client Package的软件就可以了,这个软件不需要安装,只要解压就可以用了,很 ...