可以啊,用css3或者jq实现。
成都创新互联网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队,负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作,以确保网站外观精美、成都网站建设、网站建设易于使用并且具有良好的响应性。
可以使用css3的奇偶选择器,如:
tr:nth-child(odd){background-color:#FFE4C4;}
tr:nth-child(even){background-color:#F0F0F0;}
li:nth-child(odd)是设置奇数行的背景色,li:nth-child(even)是设置偶数行的。但是css3不兼容IE9以下的浏览器,如果需要考虑到兼容问题的话,可以使用jq设置,如:
$("table tr:nth-child(even)").css("background-color","#FFE4C4"); //设置偶数行的背景色
$("table tr:nth-child(odd)").css("background-color","#F0F0F0"); //设置奇数行的背景色
使用jquery的伪类选择器,例如
$("选择器 :odd").css("background","#0f0");//奇数行
$("选择器 :even").css("background","#ff0");//偶数行
若是用原生js就要判断,例如
for(var i = 0; i 元素行数; i++){
if(i%2 == 0){
//奇数行代码
}else{
//偶数行代码
}
}
而且用css也可以添加奇偶数行的样式,例如元素为tr的奇偶设置
tr:nth-child(odd){background:#0f0;}
tr:nth-child(even){background:#ff0;}
nth-of-type伪类选择器也能实现此效果。
看例子
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ""
html xmlns="" xml:lang="en"
head
meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /
title/title
/head
body
script src=""/script
script type="text/javascript"
$(function(){
$('tr:odd').css('background','red');
$('tr:even').css('background','blue');
})
/script
table
tr
td我是一行代码/td
/tr
tr
td我是一行代码/td
/tr
tr
td我是一行代码/td
/tr
tr
td我是一行代码/td
/tr
tr
td我是一行代码/td
/tr
tr
td我是一行代码/td
/tr
tr
td我是一行代码/td
/tr
tr
td我是一行代码/td
/tr
/table
/body
/html
可以使用jquery来实现 例如 $("table tr:odd").css("background","#fff");或者使用css3,例如table tr:2n{background:#fff;}
你使用jquery为啥还要这样做三目运算符呢?jquery选择器可以直接选出奇数和偶数呀!
例如
$("ul li:even").addCass("li2") 所有偶数 li 元素添加li2类名
$("ul li:odd").addCass("li1") 所有奇数li 元素添加li1类名
可以在样式里面给它写奇偶数的判断,比如循环一个 ul li 列表 要实现奇偶数样式不同 就用ul li:nth-child(odd)表示偶数;奇数用nth-child(even)表示。
新闻标题:css偶数样式,css奇数偶数
文章路径:https://www.cdcxhl.com/article24/dsohjce.html
成都网站建设公司_创新互联,为您提供微信公众号、微信小程序、网站策划、响应式网站、网页设计公司、服务器托管
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联