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选择器.优先级与 ...
随机推荐
- 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 ...
- android操作sdcard中的多媒体文件(二)——音乐列表的更新
android操作sdcard中的多媒体文件(二)——音乐列表的更新 原文地址 在上一篇随笔中,我介绍了如何在程序中查询sdcard内的多媒体文件,并且显示到播放列表中,但是,如果在sdcard内删除 ...
- IOS开发—数据库的使用
1.首先封装方法(建一个DataBase类封装) 2.实现DataBase类的方法 3.第一步先建立一个表 4.进行插入.删除.更新 插入的sql语句:@"insert into user ...
- [转] Neutron FWaaS
OpenStack Neutron FWaaS 学习 ( by quqi99 ) 作者:张华 发表于:2013-06-24 版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息 ...
- Understanding and Managing SMTP Virtual Servers
Simple Mail Transfer Protocol (SMTP) Service Overview The Simple Mail Transfer Protocol (SMTP) servi ...
- jfinal配置rails的数据表
鉴于rails的部署太可怕,所以有了使用rails的建表工具和migration,用jfinal来开发的想法,在此贴一下需要注意的地方 maven配置 <dependency> <g ...
- Tomcat的startup.bat一闪而过问题的解决
问题描述:点击Tomcat的startup.bat,一闪而过. 问题分析: 1.Tomcat的startup.bat--->catalina.bat--->setclasspath.bat ...
- 【转】c#实现文件下载
需求:点击SAVE,去ajax去后台下载文件,完成后出现保存对话框,然后直接下载. 解决方案:下载完成后用JS转到向到另一个页面,在这页面Page_Load里用C#Response对象直接下载. 下载 ...
- 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 ...
- hibernate级联与反向
cascade:设置本表与关联表之间的级联操作,如:设置为save-update,则插入或更新对象时同时保存或更新另一端的表,但不会产生关联关系数据,除非inverse为false. inverse: ...