<style>
.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
/* nth-child():规定属于其父元素的第二个子元素的每个p的背景色;
nth-child(n):选择器匹配属于其父元素的第N个子元素,不论元素的类型,n可以使数字、关键词或表达式
odd和even是可用于匹配下标是奇数或者偶数的子元素的关键词 nth-of-type(n):选择器匹配属于父元素的特定类型的第N个子元素的每个元素,n可以使数字、关键词或表达式 区别:nth-child(),该选择器选取父元素的第N个子元素,与类型无关
*/
</style> <div style="margin-top: 100px;">
<table class="table-striped">
<tbody>
<tr>
<td>1</td>
<td>dafsdf</td>
</tr>
<tr>
<td>2</td>
<td>QQQQQQQQQ</td>
</tr>
<tr>
<td>3</td>
<td>sssssssssssss</td>
</tr>
<tr>
<td>4</td>
<td>zzzzzzzzzzzzz</td>
</tr>
</tbody>
</table> </div>

css选择器nth-child()和nth-of-type()的应用的更多相关文章

  1. css选择器学习(一)

    1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. CSS的引入方式及CSS选择器

    一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...

  3. CSS选择器分类总结

    一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...

  4. css selector regexp css选择器 正则表达式 css 参考手册

    jQuery 选择元素  a.text-success, a.text-danger, a.text-primary, a.text-info $("a[class^=text-]" ...

  5. CSS 选择器简介

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...

  6. CSS选择器,优先级的总结

    CSS选择器 css选择器种类 基本选择器: 通配符选择器 * id选择器 #id 类选择器 .className 元素选择器 E 元素后代选择器  E F 子元素选择器 E > F 相邻兄弟元 ...

  7. CSS选择器大全48式

    00.CSS选择器 CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器.类选择器.id选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...

  8. html学习第二天—— 第八章—— CSS选择器

    标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...

  9. 总结30个CSS选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  10. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

随机推荐

  1. R(二): http与R脚本通讯环境安装

    结合实际的工作环境,在开始R研究的时候,首先着手收集的就是能以Web方式发布R运行结果的基础框架,无耐的是,R一直以来常使用于个人电脑的客户端程序上,大家习惯性的下载R安装包,在自己的电脑上安装 -- ...

  2. 转:Why SeaJS

    原文地址:http://chaoskeh.com/blog/why-seajs.html Why SeaJS 前言 本文主要面向刚接触 SeaJS 的同学.文章会先提出传统 Javascript 开发 ...

  3. LINQ学习入门教程(一)

    LINQ 查询简介       Linq 是一跨各种数据源和数据格式的数据模型:它在查询是,始终是把它作为一种对象来操作,可以使用基本相同的编码模型查询和数据的转换XML,SQL,ADO数据等: Li ...

  4. C#本地时间和GMT(UTC)时间的转换

    /// <summary> /// 本地时间转成GMT时间 /// </summary> 4 public static string ToGMTString(DateTime ...

  5. C/C++中产生随机数(rand,srand用法)

    计算机的随机数都是由伪随机数,即是由小M多项式序列生成的,其中产生每个小序列都有一个初始值,即随机种子.(注意: 小M多项式序列的周期是65535,即每次利用一个随机种子生成的随机数的周期是65535 ...

  6. AP_AP系列 - 相关设定的简述(概念)

    2014-07-08 Created By BaoXinjian

  7. ylbtech-Unitity-cs:传递的字符串中数字字符的数目

    ylbtech-Unitity-cs:传递的字符串中数字字符的数目 1.A,效果图返回顶部   1.B,源代码返回顶部 1.B.1, using System; namespace Functions ...

  8. JAVA 子父类的特点

    一.变量(属性)    this 代表当前对象的引用 this.变量 首先在本类中找所需要的这个变量,如果没有找到再去父类中找    super 用于访问当前对象的父类成员 super.变量 直接在父 ...

  9. [ActionScript 3.0] Away3D 天空盒(skybox)例子

    /* SkyBox example in Away3d Demonstrates: How to use a CubeTexture to create a SkyBox object. How to ...

  10. [ActionScript 3.0] AS3 绘制立方体

    package { import flash.display.Sprite; import flash.events.Event; import flash.geom.Vector3D; import ...