伪类主要分为两种。伪类是通过冒号来表示的。
- UI(User Interface)该伪类会在html元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用某种css样式。
- 结构化伪类会在标记中存在某种结构上的关系时(如某个元素是一组元素的第一个或者是最后一个)，为相应的元素应用css样式
链接伪类
针对链接的伪类一共有四个，链接始终会处于下面四中状态之一：
- link 此时链接处在等用户点击
- Visited 此前用户已经点击过这个链接
- Hover 鼠标正悬停在这个链接上
- Active 链接正在被点击(鼠标已经按在了这个链接上但是还没有被释放)
需要注意的是这四个伪类出现的顺序是有要求的，必须是按照上面所写的顺序出现，不一定四个都要出现，只是如果出现了两个或以上的时候其顺序就是要按照上面顺序写。
a:link {color:black}
a:visited {color:gray}
a:hover {text-decoration:none} /*text-decoration:none表示的是去除下划线 */
a:active {color:red}
focus伪类
语法格式是：e:focus
上面的e表示的是任何元素，比如说p，h1，section等。
input:focus {border:1px solid blue;}
上面的代码表示输入框获得焦点时添加蓝色边框。
结构化伪类
first-child与last-child
语法格式是：
e:first-child
e:last-child
代码示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ol.result li:first-child {
color: blue;
}
</style>
</head>
<body>
<ol class="result">
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
</body>
</html>
:first-child表示一组兄弟元素中的第一个元素，:last-child表示一组兄弟元素最后一个。所以上面的例子中first会变成蓝色。
:nth-child(n)
上面的n表示的是一个数字，表示的是一组兄弟元素中的第n个元素。比如上面的例子中改一下样式：
<style>
li:nth-child(2) {
color: blue;
}
</style>
表示的是第二个元素变为蓝色。
扫一扫
1331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
