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

css 设置奇数行偶数行样式的更多相关文章

  1. CSS3设置Table奇数行和偶数行样式

    table:.myTable tr:nth-child(even){ //偶数行 background:#fff;}.myTable tr:nth-child(odd){ //奇数行 backgrou ...

  2. CSS中如何选择ul下li的奇数、偶数行

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

  3. CSS设置input placeholder文本的样式

    placeholder是HTML5  input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏 ...

  4. html的table列表根据奇数还是偶数行显示不同颜色

    <tr <s:if test="#sts.even"> class="table_1" onMouseOut="this.class ...

  5. css设置input获得焦点的样式

    input:focus{ 样式; } 这样就ok

  6. css 设置overflow:scroll 滚动条的样式

    /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1 ...

  7. js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  8. css给奇数行或偶数行添加指定样式

    odd表示奇数行,even表示偶数行; tr:nth-child(odd); .table-striped > tbody > tr:nth-child(odd) { background ...

  9. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

  1. 关于如何实现一个Saga分布式事务框架的思考

    关于Saga模式的介绍,已经有一篇文章介绍的很清楚了,链接在这里:分布式事务:Saga模式. 关于TCC模式的介绍,也已经有一篇文章介绍的很清楚了,链接在这里:关于如何实现一个TCC分布式事务框架的一 ...

  2. CSS的position属性:relative和absolute

    relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px.如果它之前的元素也为relati ...

  3. 六十一、SAP中的逻辑运算与进制转换

    一.代码如下 二.16进制计算过程如下 三.计算结果为16进制的11,也就是10进制的17

  4. 《新标准C++程序设计》3.9-3.10(C++学习笔记11)

    一.C++程序到C程序的翻译 程序示例分析: C++: class CCar { public: int price; void SetPrice (int p); }; void CCar::Set ...

  5. qt 中图表 QtCharts 的使用

    要使用QtCharts 需要几个步骤: 1. pro 文件中 修改 QT += charts 2. 把 chart 相关的头文件放在 ui 相关的头文件上面,否则会导致 编译错误,找不到 chartV ...

  6. 电影网站的电影m3u8源址分享(存储于mysql数据库,可直接应用在电影网站上使用)

    说明: 1.包含一个films.sql文件,基于mysql5.6的数据表导出文件. 2.该sql文件里面包含一个mysql数据表films,内含35000部电影m3u8源地址. 3.films数据表包 ...

  7. python基础(二)抽象

    1 函数与模块 编程大师Martin Fowler先生曾经说过:"代码有很多种坏味道,重复是最坏的一种!" 函数 为了减少代码中重复出现的冗余代码,通常我们选择创建函数来供代码重复 ...

  8. javascript 对象只读

    var person = {}; Object.defineProperty(person, "name", { writable: false, value: "nic ...

  9. java菜鸡循环练习

    While 循环练习  输入3次密码,则打印密码锁定 package com.lv.test; import java.util.Scanner; public class DemoPass { pu ...

  10. Ubantu学习笔记2

    又是新的一天,继续学习Ubantu命令 cat 可以查看文件内容 cat -n p.py 可以在查看文件内容的同时显示行号 cat -s p.py 可以将多行空白的地方进行合并成一行(输入空格的地方不 ...