<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. Java compiler level does not match the version of the installed Java project facet.问题

    从同事那里拷贝过来的web项目,导入到eclipse中,出现Java compiler level does not match the version of the installed Java p ...

  2. android操作sdcard中的多媒体文件(二)——音乐列表的更新

    android操作sdcard中的多媒体文件(二)——音乐列表的更新 原文地址 在上一篇随笔中,我介绍了如何在程序中查询sdcard内的多媒体文件,并且显示到播放列表中,但是,如果在sdcard内删除 ...

  3. IOS开发—数据库的使用

    1.首先封装方法(建一个DataBase类封装) 2.实现DataBase类的方法 3.第一步先建立一个表 4.进行插入.删除.更新 插入的sql语句:@"insert into user ...

  4. [转] Neutron FWaaS

    OpenStack Neutron FWaaS 学习 ( by quqi99 ) 作者:张华  发表于:2013-06-24 版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息 ...

  5. Understanding and Managing SMTP Virtual Servers

    Simple Mail Transfer Protocol (SMTP) Service Overview The Simple Mail Transfer Protocol (SMTP) servi ...

  6. jfinal配置rails的数据表

    鉴于rails的部署太可怕,所以有了使用rails的建表工具和migration,用jfinal来开发的想法,在此贴一下需要注意的地方 maven配置 <dependency> <g ...

  7. Tomcat的startup.bat一闪而过问题的解决

    问题描述:点击Tomcat的startup.bat,一闪而过. 问题分析: 1.Tomcat的startup.bat--->catalina.bat--->setclasspath.bat ...

  8. 【转】c#实现文件下载

    需求:点击SAVE,去ajax去后台下载文件,完成后出现保存对话框,然后直接下载. 解决方案:下载完成后用JS转到向到另一个页面,在这页面Page_Load里用C#Response对象直接下载. 下载 ...

  9. iphone Dev 开发实例10:How To Add a Slide-out Sidebar Menu in Your Apps

    Creating the Xcode Project With a basic idea about what we’ll build, let’s move on. You can create t ...

  10. hibernate级联与反向

    cascade:设置本表与关联表之间的级联操作,如:设置为save-update,则插入或更新对象时同时保存或更新另一端的表,但不会产生关联关系数据,除非inverse为false. inverse: ...