伪类和伪元素(二)

本文最后更新于:2020年3月27日 上午

伪类和伪元素(二)

选择第一个子元素

使用另外一个静态伪类:first-child来选择元素的第一个子元素。(之前所说的:link和:visited也是静态伪类)

先看下面的代码:

1
2
3
4
5
<div>
<p>
这是p层<em>这是em</em>
</p>
</div>
1
2
/*这里的含义是当p作为第一个子元素的时候,该样式如下*/
p:first-child { color: red; }

:first-child表示在一组兄弟元素中的第一个元素
Note:最初定义时,:first-chlid所选元素必须有一个parent。而从选择器 Level 4 开始,parent不再是必须的。

根据语言选择

在某些情况下,可以根据元素的语言来选择,可以使用:lang()伪类。有点类似于属性选择器:

🌰:比如想把所有的法语元素变成斜体:

1
2
<p lang="fr">这是fr</p>
<p lang="en">这是en</p>
1
2
/*那么它会把第一个p元素中的内容变成斜体*/
*:lang(fr) { font-style: italic; }
结合伪类

将伪类结合起来更方便我们展示更好的效果:

1
2
3
4
5
6
7
8
/*这里是a元素(具有href)点击前鼠标移动上去的样式*/
a:link:hover { color: red; }
/*这里是a元素(具有href)点击后鼠标移动上去的样式*/
a:visited:hover { color: blue; }
/*这里是a元素(具有href)并且lang属性为en的a元素,点击前鼠标移动上去的样式*/
a:link:hover:lang(en) { color: green; }
/*这里是a元素(具有href)并且lang属性为en的a元素,点击后鼠标移动上去的样式*/
a:visited:hover:lang(en) { color: yellow; }