CSS3选择器之学习笔记

首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素,甚至第偶数个、奇数个子元素精选样式的制定。

/*选择器写法示例*/

nth-child(n) //正数第n个子元素
nth-last-child(n) //倒数第n个子元素
nth-child(odd)
//正数下来所有的第偶数个子元素
nth-last-child(even) //倒数上去的第奇数个子元素

那么nth-of-type与nth-last-of-type呢?

在一个div中有数篇文章,h2与p多次使用的情况要对h2实现奇偶异色,如果使用nth-child或是nth-last-child来实现就会发现一些问题(不提供demo代码,读者可自行编写h2ph2ph2p如此),试验的结果是没有出现奇偶异色,仅仅是奇数的变色了。

这个问题产生的原因是,nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素中的所有子元素一起计算的。换句话说,”h2:nth-child(odd)”这句话的含义,并不是指“针对div元素中第奇数个h2子元素来使用”,而是指“当div元素中的第奇数个子元素是h2子元素的时候使用。”(demo的话h2,p相互交错,h2都在奇数位置。)

nth-of-type与nth-last-of-type可以避免这类问题的发生。使用这两个选择器的时候,CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候,就只针对同类型的子元素进行计算了。

/*选择器写法示例*/

h2:nth-of-type(odd) //第偶数个h2子元素
h2:nth-of-type(even) //第奇数个h2子元素

新增结构伪类选择器列表:

  E:root:匹配E所在文档的根元素

  E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素

  E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)

  E:nth-of-type(n):匹配父元素的第n个类型为E的子元素

  E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)

  E:first-of-type:匹配父元素的第一个类型为E的子元素

  E:last-child:匹配元素类型为E且是父元素的最后一个子元素

  E:last-of-type:匹配父元素的最后一个类型为E的子元素

  E:only-child:匹配元素类型为E且是父元素中唯一的子元素

  E:only-of-type:匹配父元素中唯一子元素是E的子元素

  E:empty:匹配不包含子节点(包括文本)的E元素

来自:http://www.111cn.net/cssdiv/css/47214.htm

时间: 2024-11-03 21:50:06

CSS3选择器之学习笔记的相关文章

CSS3 选择器之基本选择器

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选择器主要是用来确定html的树形结构中的DOM元素节点. CSS3的常用选择器有: 下面举几个例子来说明选择器的实用方法: 1.创建如下的DOM结构: <div class="demo"> <ul class="clearfix"> <li

CSS3选择器之:nth-child(n)

第一次用到这个选择器还是为了解决下面了的问题: 手机的前端,我们使用了mint-ui,里面有一个日期选择控件,但是选择的时候没有提供年月的选择器,如: 而是提供了下面的方式: 为了达到上面的效果,使用了一个讨巧的方法,用CSS3的选择器:nth-child(n),直接让第3个(天数)元素隐藏掉. 1 .picker-slot.picker-slot-center:nth-child(3){ 2 display: none; 3 } 参考文档: http://www.w3school.com.cn

CSS3 counters计数器学习笔记

有思想才能成长,每天记录一点点.... CSS3 Counters可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能.与有序列表相比,突出特性在于可以对任意元素计数,同时实现个性化计数. 计数器相关属性: counter-reset 定义计数器,包括初始值,作用域等: 语法[<indentifier> <integer>?]+|none |inherit, 当元素display:none时,该属性失效: counter-increment 设置计数器的增数:

CSS3 选择器之基本选择器 属性选择器 伪类选择器

CSS 选择器 常见的选择器列表图 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持. id选择器(#ID) 后代选择器(E F) 子元素选择器(E>F)    IE6不支持子元素选择器.

CSS3学习笔记

这两天的CSS3学习笔记: 慕课网课程地址: http://www.imooc.com/learn/33 笔记: 边框: 圆角效果border-radius:同border相同的缩写方式: 阴影box-shadow: 参数说明: 说明: 单位除了用px也可以用百分比: 多个阴影:用逗号隔开即可: 模糊半径与扩展半径的区别: 阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊: 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

OpenGL学习笔记:拾取与选择

转自:OpenGL学习笔记:拾取与选择 在开发OpenGL程序时,一个重要的问题就是互动,假设一个场景里面有很多元素,当用鼠标点击不同元素时,期待作出不同的反应,那么在OpenGL里面,是怎么知道我当前鼠标的位置是哪一个物体呢? OpenGL有一套机制,叫做Picking, 里面涉及到几个核心概念: 1. selection mode. 选择模式 2. name stack. 名字栈 3. hit record. 命中记录 4. viewing volume. 视角范围 在OpenGL的pick

机器学习之模型评估与模型选择(学习笔记)

时间:2014.06.26 地点:基地 -------------------------------------------------------------------------------------- 一.训练误差和测试误差 机器学习或者说统计学习的目的就是使学习到的模型不仅对已知数据而且对未知数据都都很好的预测能力.不同的学习方法会得出不同的模型.在评判学习方法的好坏时,常用的是: 1.基于损失函数的模型的训练误差                          2.模型的测试误

html5 +css3 第一章学习和笔记

各位同学.身为本版的斑竹.,希望各位童鞋都能学到Html5 .特此没两天更新一个学习笔记和大家一起学习Html5.... 语法改变       1.新增的元素和废除的元素       2.新增的属性和废除的属性       3.全局属性 html5和4的区别:DOCTYPE.声明.内容类型.字符的编码的制定方法.元素标记的省略.布尔值的类型.引号的省略 一:html5中的标记方法        1内容类型:.html  .htm        2DOCTYPE声明: <!DOCTYPE html