您的位置:首页 > 代码 > HTML/CSS > CSS中关于奇偶数行的应用

CSS中关于奇偶数行的应用

admin 2020-12-03 23:38:26 318阅读 奇偶数 CSS

CSS中奇偶数行应用


odd 奇数 :even 偶数


.list ul li:nth-child(even){ ...}    //li的偶数行样式
.list ul li:nth-child(odd){ ...}    //li的奇数行样式
.list ul li:nth-child(1){ top:0;}       //第一个li
.list ul li:nth-child(2){ top:30px;}    //第二个li

部分情况下的解决方案


<style>  
.list li:nth-of-type(odd){ margin-left:20px;}奇数行   
.list li:nth-of-type(even){margin-left:10px;}偶数行   
<style>

jQuery中奇、偶数行的应用


<div class="luckcms">
  <ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
  </ul>
</div>
<script>
   $('.laocms ul li:odd').addClass('li_a');// 1, 3 行
</script>
<script>
   $('.laocms ul li:odd').css({background:'#f60'});// 1, 3 行
   $('.laocms ul li:even').css({background:'#0ae'});// 2, 4 行 
</script>


发表评论
  • 点击这里
评论列表
  • 尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?
    别来无恙 1970-01-01
  • 尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,
    路人甲 1970-01-01
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员
  • 尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!
    路人甲 1970-01-01
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复