nth-child与nth-of-type
nth-of-type这个CSS3伪类还从来没有用过,今天好好研究一番,发现还是有用的。现在下面的Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.test1 p:nth-of-type(1) {
color: blue;
} .test2 p:nth-child(1), .test3 p:nth-child(1) {
color: blue;
} </style>
</head> <body>
<div class="test1">
<a>This is some .</a>
<p>This is some text.</p>
<p>This is some text.</p>
</div> <br> <div class="test2">
<a>This is some .</a>
<p>This is some text.</p>
<p>This is some text.</p>
</div> <br> <div class="test3">
<p>This is some text.</p>
<p>This is some text.</p>
</div> </body>
</html>
显示结果如下
可见,p:nth-of-type(1)是取父元素下的p这种类型的第一个,p前面可能会有其它类型的元素;而p:nth-child(1)是父元素的第一个元素,且该元素必须是p。可以参考这篇文章,CSS3 选择器——伪类选择器 但这篇文章有些方向错误,认为nth-of-type在工作中没用。其实在某些情况下还是十分有用的。
nth-child与nth-of-type的更多相关文章
- [Swift]LeetCode400. 第N个数字 | Nth Digit
Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note:n is ...
- Sass函数:列表函数nth
语法: nth($list,$n) nth() 函数用来指定列表中某个位置的值.不过在 Sass 中,nth() 函数和其他语言不同,1 是指列表中的第一个标签值,2 是指列给中的第二个标签值,依此类 ...
- 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,谢谢! 浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排.各家浏览器引擎的工作原理略有差别,但也有一定规则. 简 ...
- jq 弹半透明遮罩层
jquery制作点击按钮弹出遮罩半透明登陆窗口 // )[^>]*$|^#([\w-]+)$/,M=/^.[^:#\[\.,]*$/,ka=/\S/,$= /^(\s|\u00A0)+|(\s| ...
- 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, ...
- jquery.SuperSlide.2.1.2--轮播(兼容到IE7 适用于整屏)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
随机推荐
- Redis的高级应用-事务处理、持久化、发布与订阅消息、虚拟内存使用
三.事务处理 Redis的事务处理比较简单.只能保证client发起的事务中的命令可以连续的执行,而且不会插入其他的client命令,当一个client在连接 中发出multi命令时,这个连接就进入一 ...
- 深度解析VC中的消息
消息是指什么? 消息系统对于一个win32程序来说十分重要,它是一个程序运行的动力源泉.一个消息,是系统定义的一个32位的值,他唯一的定义了一个事件,向Windows发出一个通知,告诉应用程序某个事情 ...
- sublime找到成对标签(Ctrl+Shift+")
sublime找到成对标签(Ctrl+Shift+") windows版本默认快捷键是Ctrl+Shift+" sublime text怎么突出显示成对标签 使用BracketHi ...
- Spring 使用Cache(转)
从3.1开始Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事物管理的支持.Spring Cache是作用在方法上的,其核心思想是:当我们在调用一个缓存方法时会把该方法参数 ...
- 部分和(partial sum)在算法求解中的作用
C++ 的 STL 库的 <numeric> 头文件的 partial_sum 函数已实现了对某一序列的 partial sum. partial_sum(first, last, des ...
- 修改SVN中文件的可执行属性
博文来自下面路径,转载请注明原出处: http://bigwhite.blogbus.com/logs/74568031.html 修改SVN中文件的可执行属性 - [开源世界] Tag:开源世界 S ...
- Cocos2d-x使用Javascript开发js绑定C++<代码演示样例>
class IOSiAPDelegate{ public: virtual ~IOSiAPDelegate() {} }; class IOSAlipay{ public: IOSAlipay(); ...
- iis windows phpstudy安装redis扩展
说明,我的服务器是2008 64位 php5.4.33 首先下载符合条件的redis扩展,是否符合条件可以参考https://pecl.php.net/package/redis,进入之后,点击&qu ...
- HTML标签的权重
原文 简书原文:https://www.jianshu.com/p/c86d540aec40 大纲 1.HTML权重标签 2.常见的权重标签 3.常见的权重标签的使用 1.HTML权重标签 SEOer ...
- 【26.34%】【codeforces 722A】Broken Clock
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...