WEB前端使用的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元素

时间: 2024-11-11 20:30:22

WEB前端使用的CSS3选择器的相关文章

web前端小案例-css3制作浏览器背景渐变背

知识点:rgb全色循环算法,HEX与RGB颜色转换算法.CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等. css代码: <style> *{margin:0;padding:0;} body#wrap{width:100%;height:500px; } </style> JavaScript代码: <script> function convert(sRgb){ /*rgb转换成HEX*/ var sRgb=sRgb; var sHe

python基础下的web前端学习之HTML(一)

一.参考书籍: <Web 前端开发 HTML5+CSS3+jQuery+AJAX 从学到用完美实践> 备注:本书为工具书. 二.HTML5元素: 按功能划分:基础.格式.表单.框架.图像.音频/视频.链接.列表.表格.样式/节.元信息.编程.(参考P76) 元素属性:基本属性.语言属性.键盘属性.内容属性.延伸属性等.(参考P82) 三.结构基础: <!DOCTYPE html> #<!DOCTYPE>元素定义文档类型为html <html lang="

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

web前端入门到实战:相邻兄弟选择器(+)、子选择器(&gt;)、兄弟选择器(~)等用法

前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(>).兄弟选择器(~).first-child.:last-child.:nth-child().:nth-last-child()的用法. 相邻兄弟选择器(+) 相邻兄弟选择器可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素.注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符.器. <!

[CSS3]移动Web开发系列之CSS3增强型选择器

css3是移动Web开发的主要技术之中的一个.当前.CSS3技术最适合在移动Web开发中使用的特性有增强的选择器.阴影.强大的背景设置 .圆角边框 接下来我们主要解说增强型的选择器.主要分两种,属性选择器和伪类选择器 1.属性选择器 1.1全然匹配选择器 语法:[attribute=value] <span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</d

前端必须掌握30个CSS3选择器

也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手. 本文中将综合前端开发中常用的30个CSS3选择器,并且附带了浏览器的支持情况,希望对大家有所帮助. 1.*:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除默认CSS

6个Web前端纯CSS3实现的单多选选择框效果图展示(下)

4.mootools实现checkbox和radiobox效果 能在支持 FireFox.Chrome.Safari.傲游.搜狗.360浏览器. 源码下载/   在线演示 5.  jquery打钩打叉图标特效 源码下载  /  在线演示 6.  纯CSS3实现的单多选选择框 源码下载 /  在线演示 6个Web前端纯CSS3实现的单多选选择框效果图展示(下)

6个Web前端纯CSS3实现的单多选选择框效果图展示(上)

1. 界面美化Javascript类库 源码下载  /  在线演示 2.  jquery衣服尺寸勾选表单 源码下载 /  在线演示 3.jquery图形多选复选框 源码下载/   在线演示 6个Web前端纯CSS3实现的单多选选择框效果图展示(上)

web前端设计基础——HTML5、CSS3、JavaScript 简答题整理

web前端设计基础--HTML5.CSS3.JavaScript 简答题整理 (1)解释一下名词的含义:IP地址.URL.域名 (2)基本的web技术有哪些?web的工作原理是什么? 基本的web技术有:URL.HTTP.MIME. (3)什么是超文本?超文本与超媒体之间的关系是什么? 超文本又称超媒体,是将各种信息节点链接在一起的一种网络逻辑结构. (4)HTML5 的特点是什么? (5)web 标准有哪些?为什么采用 web 标准? web体系标准:结构标准.表现标准.行为标准. web标准