css选择器nth-child()和nth-of-type()的应用
<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()的应用的更多相关文章
- css选择器学习(一)
1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS的引入方式及CSS选择器
一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...
- CSS选择器分类总结
一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...
- css selector regexp css选择器 正则表达式 css 参考手册
jQuery 选择元素 a.text-success, a.text-danger, a.text-primary, a.text-info $("a[class^=text-]" ...
- CSS 选择器简介
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...
- CSS选择器,优先级的总结
CSS选择器 css选择器种类 基本选择器: 通配符选择器 * id选择器 #id 类选择器 .className 元素选择器 E 元素后代选择器 E F 子元素选择器 E > F 相邻兄弟元 ...
- CSS选择器大全48式
00.CSS选择器 CSS的选择器分类如下图,其中最最常用的就是基础选择器中的三种:元素选择器.类选择器.id选择器.伪类选择器就是元素的不同行为.状态,或逻辑.然后不同的选择器组合,基于不同的组合关 ...
- html学习第二天—— 第八章—— CSS选择器
标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...
- 总结30个CSS选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
随机推荐
- R(二): http与R脚本通讯环境安装
结合实际的工作环境,在开始R研究的时候,首先着手收集的就是能以Web方式发布R运行结果的基础框架,无耐的是,R一直以来常使用于个人电脑的客户端程序上,大家习惯性的下载R安装包,在自己的电脑上安装 -- ...
- 转:Why SeaJS
原文地址:http://chaoskeh.com/blog/why-seajs.html Why SeaJS 前言 本文主要面向刚接触 SeaJS 的同学.文章会先提出传统 Javascript 开发 ...
- LINQ学习入门教程(一)
LINQ 查询简介 Linq 是一跨各种数据源和数据格式的数据模型:它在查询是,始终是把它作为一种对象来操作,可以使用基本相同的编码模型查询和数据的转换XML,SQL,ADO数据等: Li ...
- C#本地时间和GMT(UTC)时间的转换
/// <summary> /// 本地时间转成GMT时间 /// </summary> 4 public static string ToGMTString(DateTime ...
- C/C++中产生随机数(rand,srand用法)
计算机的随机数都是由伪随机数,即是由小M多项式序列生成的,其中产生每个小序列都有一个初始值,即随机种子.(注意: 小M多项式序列的周期是65535,即每次利用一个随机种子生成的随机数的周期是65535 ...
- AP_AP系列 - 相关设定的简述(概念)
2014-07-08 Created By BaoXinjian
- ylbtech-Unitity-cs:传递的字符串中数字字符的数目
ylbtech-Unitity-cs:传递的字符串中数字字符的数目 1.A,效果图返回顶部 1.B,源代码返回顶部 1.B.1, using System; namespace Functions ...
- JAVA 子父类的特点
一.变量(属性) this 代表当前对象的引用 this.变量 首先在本类中找所需要的这个变量,如果没有找到再去父类中找 super 用于访问当前对象的父类成员 super.变量 直接在父 ...
- [ActionScript 3.0] Away3D 天空盒(skybox)例子
/* SkyBox example in Away3d Demonstrates: How to use a CubeTexture to create a SkyBox object. How to ...
- [ActionScript 3.0] AS3 绘制立方体
package { import flash.display.Sprite; import flash.events.Event; import flash.geom.Vector3D; import ...