E:nth-child(n)
E:nth-child(n)
语法:
E:nth-child(n) { sRules }
说明:
- 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
- 该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)
- 使用E:nth-child(n)实现奇偶:
示例代码:
<style>li:nth-child(2n){color:#f00;} /* 偶数 */ li:nth-child(2n+1){color:#000;} /* 奇数 */</style><ul><li>列表项一</li><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>
因为(n)代表一个乘法因子,可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数,而(2n+1)换算出来会是奇数
该选择符允许使用一些关键字,比如:odd, even
使用odd, even实现奇偶:
<style>li:nth-child(even){color:#f00;} /* 偶数 */ li:nth-child(odd){color:#000;} /* 奇数 */</style><ul><li>列表项一</li><li>列表项二</li><li>列表项三</li><li>列表项四</li></ul>
关键字odd代表奇数,even代表偶数
- 有一点需要注意的是:
HTML示例代码:
<div><p>第1个p</p><p>第2个p</p><span>第1个span</span><p>第3个p</p><span>第2个span</span><p>第4个p</p><p>第5个p</p></div>
CSS Case 1:
p:nth-child(2){color:#f00;}
很明显第2个p会被命中然后变成红色
CSS Case 2:
p:nth-child(3){color:#f00;}
这是会命中第3个p么?如果你这么认为那就错了,这条选择符就不会命中任何一个元素。
CSS Case 3:
p:nth-child(4){color:#f00;}
这时你以为会命中第4个p,但其实命中的却是第3个p,因为它是第4个子元素
E:nth-child(n)会选择父元素的第n个子元素E,如果第n个子元素不是E,则是无效选择符,但n会递增。
假设不确定第1个子元素是否为E,但是又想命中第1个E,应该这样写:
p:first-of-type{color:#f00;}
或者这样写:
p:nth-of-type(1){color:#f00;}
参考 E:first-of-type 和 E:nth-of-type(n)
E:nth-child(n)的更多相关文章
- Selenium Xpath Tutorials - Identifying xpath for element with examples to use in selenium
Xpath in selenium is close to must required. XPath is element locator and you need to provide xpath ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排.各家浏览器引擎的工作原理略有差别,但也有一定规则. 简 ...
- web前端面试题总结
HTML Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1).<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前.告知浏览器的解析 ...
- 前端开发面试知识点大纲--摘自jackyWHJ
前端开发面试知识点大纲:HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...
- HTML、CSS部分
要点:对Web标准的理解.浏览器差异.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分 ...
- Scalaz(24)- 泛函数据结构: Tree-数据游览及维护
上节我们讨论了Zipper-串形不可变集合(immutable sequential collection)游标,在串形集合中左右游走及元素维护操作.这篇我们谈谈Tree.在电子商务应用中对于xml, ...
- simple_html_dom使用小结
simple_html_dom使用小结 分类: PHP2012-08-31 14:24 3094人阅读 评论(0) 收藏 举报 htmlcallbackstringdivfunctionfile 1 ...
- PHP Simple HTML DOM 使用
下载地址:https://github.com/samacs/simple_html_dom 文档地址 http://simplehtmldom.sourceforge.net/ 一直以来使用php解 ...
- HTML5面试题-备
万不可投机取巧.只求当时过关,非长久之计也!(感谢大神分享) 面试有几点需要注意: 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑. 题目类型: 技术视野.项目细节.理论知 ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
随机推荐
- Git学习记录(一)
本篇文章介绍Git的本地使用 Git是什么? Git是世界上最先进的分布式版本控制系统. 那么什么是版本控制系统? 我们来举个例子,假设我创建了一个项目Project.1,里面写了一个README.t ...
- 机器学习之softmax回归笔记
本次笔记绝大部分转自https://www.cnblogs.com/Luv-GEM/p/10674719.html softmax回归 Logistic回归是用来解决二类分类问题的,如果要解决的问题是 ...
- LINUX驱动笔记 目录
笔记参考了宋宝华老师的<Linux设备驱动开发详解:基于最新的Linux 4.0内核>以及韦东山老师的嵌入式驱动教程 笔记开发环境: 单板:第一章到第八章使用TINY4412-1611:第 ...
- SAS学习笔记56 ODS ESCAPECHAR
这种内嵌格式独立于style型和table型,它既可以结合二者使用,也可以独立使用.它主要通过下列语句的格式形式来进行调用: ODS ESCAPECHAR ‘^’; 上述符号’^’表示触发条件,如果碰 ...
- webpack 3.1 升级webpack 4.0
webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...
- 利用RabbitMQ实现分布式事务
实现要点:1.构建本地消息表及定时任务,确保消息可靠发送:2.RabbitMQ可靠消费:3.redis保证幂等 两个服务:订单服务和消息服务 订单服务消息可靠发送 使用springboot构建项目,相 ...
- 90% 的 Python 开发者不知道的描述符应用
经过上面的讲解,我们已经知道如何定义描述符,且明白了描述符是如何工作的. 正常人所见过的描述符的用法就是上篇文章提到的那些,我想说的是那只是描述符协议最常见的应用之一,或许你还不知道,其实有很多 Py ...
- centos安装rocketMQ
1.下载安装包 http://rocketmq.apache.org/release_notes/ 这里选择 4.4.0 版本,点击进去 可以选择源码包或者二进制文件,这里选择二进制文件(ps:如果选 ...
- R_数据视觉化处理_中阶_05
条形图:条形图通过垂直或水平的条形展示了类型变量的分布(频数).最简单的用法为:barplot(height),height为矩阵或向量. horiz=TRUE选项:表示水平,在此之前先使用table ...
- 【转载】C#使用FirstOrDefault方法快速查找List集合中符合条件的第一个实体
在C#的List集合的操作中,有时候我们需要根据相关条件快速从List集合中获取到第一个符合条件的实体对象,例如有个全校班级的List集合,我们需要根据班级代码快速从List集合中查找出班级信息.可以 ...