|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-10-25 21:33 编辑
很多应用场景下,我们需要匹配符合一定条件的元素。考虑一下如下情形:
<div id="pa">
<h1>标题一</h1>
<span>小标题1</span>
<span>小标题2</span>
<span>小标题3</span>
<span>小标题4</span>
<span>小标题5</span>
<h1>标题二</h1>
<span>小标题6</span>
</div>
我们想让小标题都分行、加粗,然后奇数标题用蓝色、偶数标题用红色,怎么做?是不是要一个一个去设置、或给每一个span标签一个class标志?这倒是有效的实现方法,不过,如果处理很多很多的span标签,那会很麻烦。所以,*-of-type 伪类出现,它能很好地解决问题。请看:
我们先定义 #pa 选择器下所有的span标签都是块级元素、文本粗体、前景色红色:
#pa > span { display: block; font-weight: bold; color: red; }
接着,我们用 *-of-type(参数) 定义奇数的span前景色为蓝色:
#pa > span:nth-of-type(odd) { color: blue; }
分析一下上行代码:
① #pa > span 指定 #pa 父元素下的直系子元素 span ;
② span:nth-of-type 指定伪类元素为 span 元素的伪类;
③ nth-of-type 指定某种类型选择器的伪元素
④ nth-of-type(odd) 指定顺序为奇数的某选择器的伪元素(偶数是 even)
⑤ #pa > span:nth-of-type(odd) 定义的伪类属于 #pa 选择器下所有直系 span 标签中顺序为奇数的,如第一、三、五个span标签。
HTML代码中,<h1>标题一</h1> 和 <h1>标题二</h1> 不会受到任何影响,这是因为,:nth-of-type 定义的是冒号前的类型选择器,本例针对的是 span标签,还可以是其他的,比如 p 、 div 、img 等等元素标签。
*-of-type 还有常用到的 first-of-type 和 last-of-type,例如我们想匹配 #pa 选择器下的 第一个 span 标签,令其前景色为橄榄色:
#pa > span:first-of-type { color: olive; }
我们还想让最后一个 h1 拥有浅蓝色的背景:
#pa > h1:last-of-type { background: lightblue; }
【提示】如果省略 *-of-type 的父元素,例如不要 #pa,那么,顺序为奇数的 span 标签就变成这样:
span:nth-of-type(odd) {
color: blue;
}
这是针对整个 DOM 的 span 标签:只要它们拥有父元素(body也可以做它们的父元素),不论父元素是什么,那么,该父元素之下,span出现的顺序为奇数的,就都会匹配。所以,设置的时候,如果不想影响文档的其他 span 标签,给出它们的父元素是明智的做法。
最后整合一下CSS代码,效果请自行体验:
<style>
#pa {
/* ... */
}
#pa>span {
display: block;
font-weight: bold;
color: red;
}
#pa>span:nth-of-type(odd) {
color: blue;
}
#pa>span:first-of-type {
color: olive;
}
#pa>h1:last-of-type {
color: olive;
}
</style>
<div id="pa">
<h1>标题一</h1>
<span>小标题1</span>
<span>小标题2</span>
<span>小标题3</span>
<span>小标题4</span>
<span>小标题5</span>
<h1>标题二</h1>
<span>小标题6</span>
</div>
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|