说明
nth-of-type, first-of-type, last-of-type属于同一类的选择器, first-of-type 就等于 nth-of-type(1)
当使用类选择器和它们连用时,得尤其注意其所代表的意义,我当时第一次使用的时候,卡了好久,一度以为出了bug,在此记录一下.
比如.class:nth-of-type(i)所选出的是同时符合以下条件的html元素:
- 类属性中包含
class - 包含该属性的标签类型是它父元素下同标签类型的第 i 个
示例
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<h1>我的第1个HTML页面</h1>
<div>我的第2个HTML页面</div>
<h1 class="test">我的第3个HTML页面</h1>
<p class="test">我的第4个HTML页面</p>
<h1 class="test test1">我的第5个HTML页面</h1>
<div>我的第6个HTML页面</div>
<h1>我的第7个HTML页面</h1>
</body>
</html>css代码如下
.test{
color:red
}
.test:first-of-type{ /* 第二条 */
color:blue
}
.test1:nth-of-type(3){ /* 第三条 */
color:green;
}显示结果如下
可以仔细注意一下第二条css语法所起的作用:
- 它不会让”我的第1个HTML页面”变蓝;
- 它不会让”我的第3个HTML页面”变蓝;
- 它会让”我的第4个HTML页面”变蓝;
注意第三条css语法所起的作用:
- 它会让”我的第5个HTML页面”变绿;
P.S 我的学习日记,如有不对请指出,谢谢!
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
