CSS 背景色变化结构化伪类的练习

CSS3的nth-child() 选择器(兼容性不好)，在做表格偶数行变色的时候，我通常在绑定的时候，做一个js判断，来加一个css，从而使表格偶数行和奇数行颜色不一样。这样的兼容性很好。

但是最近在做手机网站的时候，由于手机网站对浏览器兼容要求相对较低，手机浏览器大部分都支持css3，这就大大提高了开发效率。可以随意使用CSS3 :nth-child()伪类选择器。

IE9及以上版本，火狐，谷歌，Safari ，Opera都支持！

:nth-child(n) 选择器匹配属于其父元素的第 n个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

p:nth-child(2)

{

background:#ff0000;

}

<body>

<h1>这是标题</h1>

<p>haorooms第一个段落。</p>

<p>haorooms第二个段落。</p>

<p>haorooms第三个段落。</p>

<p>haorooms第四个段落。</p>

</body>

面这段代码请问那个段落颜色是红色的？

答案是“haorooms第一个段落。”颜色变成了红色！

解释：:nth-child(n) 选择器匹配属于其父元素的第 n个子元素，不论元素的类型。p:nth-child(2),P标签的父元素是body，body的第二个子元素是“haorooms第一个段落。”

所以haorooms第一个段落颜色变为了红色！！！

很多朋友经常把:nth-child() 和:nth-of-type()混淆。

CSS3 :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

p:nth-of-type(2)

{

background:#ff0000;

}

<body>

<h1>这是标题</h1>

<p>haorooms第一个段落。</p>

<p>haorooms第二个段落。</p>

<p>haorooms第三个段落。</p>

<p>haorooms第四个段落。</p>

</body>

现在就是“haorooms第二个段落。”颜色变成了红色。

因为table的子元素一般是tr，不会有别的，所以可以用

tr:nth-child(odd) 与 tr:nth-child(even)

当然也可以用

tr:nth-of-type(odd) tr:nth-of-type(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

倍数写法：

:nth-child(an) 【:nth-of-type(an)同理，不解释】

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*

延伸

:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，还可以 :nth-child(-an+b)也就是反向匹配。

要求：

HTML：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <!--通过设置表格颜色来练习一下结构化伪类-->

     <!--表格中tbody，首行和尾行为不同颜色 中间部分两色交替-->

     <link rel="stylesheet" href="demo_tableColor.css">

 </head>

 <body>

 <div id="wrap">

     <table id="myTable" border="1" cellspacing="0" cellpadding="2">

         <thead>

         <tr>

             <td>序号</td>

             <td>姓名</td>

             <td>年龄</td>

             <td>备注</td>

         </tr>

         </thead>

         <tbody>

         <tr>

             <td>1</td>

             <td>zhangsan</td>

             <td>12</td>

             <td>1</td>

         </tr>

         <tr>

             <td>12</td>

             <td>zhangsan</td>

             <td>12</td>

             <td>1</td>

         </tr>

         <tr>

             <td>3</td>

             <td>zhangsan</td>

             <td>12</td>

             <td>1</td>

         </tr>

         <tr>

             <td>4</td>

             <td>zhangsan</td>

             <td>12</td>

             <td>1</td>

         </tr>

         <tr>

             <td>4</td>

             <td>zhangsan</td>

             <td>12</td>

             <td>1</td>

         </tr>

         <tr>

             <td>4</td>

             <td>zhangsan</td>

             <td>12</td>

             <td>1</td>

         </tr>

         <tr>

             <td>4</td>

             <td>zhangsan</td>

             <td>12</td>

             <td>1</td>

         </tr>

         <tr>

             <td>5</td>

             <td>zhangsan</td>

             <td>12</td>

             <td>1</td>

         </tr>

         </tbody>

     </table>

 </div>

 </body>

 </html>

css：

 *{

     margin: 0px;

     padding:0px;

     box-sizing: border-box;

 }

 #wrap{

    position: relative;

     top: 20px;

     left: 20px;

 }

 #myTable{

   width: 900px;

   border:1px  solid #e6e6e6;

  }

 td{

     padding: 10px 20px;

     border-left: transparent;

     border-right: transparent;

     border-top: transparent;

 }

 tbody :nth-child(odd) td{

     background-color: #d9534f;

 }

 tbody :nth-child(even) td{

     background-color: #eea236;

 }

 tbody :first-child td{

     background-color: #bce8f1;

 }

 tbody :last-child td{

     background-color: #67b168;

 }

CSS 背景色变化结构化伪类的练习的更多相关文章

CSS选择器详解（伪类）转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解之伪类伪类对大小写不敏感结构伪类选择器结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
HTML&CSS基础-子元素的伪类选择器
HTML&CSS基础-子元素的伪类选择器作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
CSS 基础知识点样式选择器伪类
CSS 基础知识点汇集版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器
目录前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...
Css详解之（伪类选择器）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
李洪强和你一起学习前端之(5)css书写位置优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
CSS学习笔记2：伪类
w3c对伪类的定义是:CSS伪类是用来添加一些选择器的特殊效果. 在我目前看来就是动态的对元素的修饰它的基本语法是选择器:伪类{} 伪类有以下几种常用的伪类: :link,:vi ...

随机推荐

【4】Kafka集群启动/关闭脚本
说明:本脚本基于SSH服务器免密登录,如集群未配置SSH,参照:<SSH安装配置> . 一.启动脚本:start-kafka-cluster.sh #!/bin/bash brokers= ...
mmap：内存映射文件
介绍建立一个文件的内存映射将使用操作系统虚拟内存来直接访问文件系统上的数据,而不是使用常规的I/O函数访问数据. 内存映射通常可以提高I/O性能,因为使用内存映射时,不需要对每一个访问都建立一个单独 ...
easyUI 布局
Layout(布局) 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的. 每个边缘区域面板都可以通过拖拽其边框改变大小,也可以点击折叠按钮将面板折叠起来.布局可以进 ...
多线程threading模块
python的多线程编程简介多线程编程技术可以实现代码并行性,优化处理能力,同时功能的更小划分可以使代码的可重用性更好.Python中threading和Queue模块可以用来实现多线程编程. 详 ...
004.MVC视图、辅助方法
一.视图基础- 视图定义: 用户界面,是显示应用程序用户界面(UI)组件 Web应用程序:页面作用: 1.输出/显示模型数据 2.出入提交视图建议在View文件夹位置存储视图视图引擎(了解):本 ...
图像处理---《Mat对象与 IplImage对象》
图像处理---<认识 Mat对象> Mat对象与 IplImage对象 (1)Mat对象:OpenCV2.0之后引进的图像数据结构.自动分配内存.不存在内存泄漏的问题,是面向对象的数据结 ...
YOLO---Darknet下的学习笔记
YOLO.V3-Darknet下的学习笔记 @wp20180927 [目录] 一. 安装Darknet(仅CPU下) 2 1.1在CPU下安装Darknet方式 2 1.2在GPU下安装Darknet ...
java学习笔记12-继承
继承就是子类继承父类的特征和行为有时候单一划分某个类别并不能处理所有情况,某些类别下有明显不同的子类,这些子类虽然拥有类似的行为和属性,但是他们各自发生的这些行为的方式或者属性对某些结果的影响是不一 ...
github仓库管理项目
一,建立本地git仓库首先,git要求使用者必须提供自己的身份标识,为此我们需要在git bash中执行以下命令: git config --global user.name 'aa.Tessst ...
技术学到多厉害，才能顺利进入BAT？
简介本科的时候对 Linux 特别感兴趣,心中向往成为一名运维工程师,就开始没日没夜的看相关的书籍,到了大约2013年前后的时候发现 DevOps 开始流行起来了,就开始学习 Python 希望成为 ...

CSS 背景色变化 结构化伪类的练习

CSS 背景色变化 结构化伪类的练习的更多相关文章

随机推荐

热门专题

CSS 背景色变化结构化伪类的练习

CSS 背景色变化结构化伪类的练习的更多相关文章