a标签的伪类、内容伪类、索引伪类、取反伪类
一、a标签的四大伪类
-
-
:hover：悬浮状态
-
:active：活跃状态
-
:visited：已访问状态
四大伪类也可用于其他标签
<style type="text/css">
a {
color: #333;
text-decoration: none;
}
/*:link为一个整体,代表超链接的初始状态*/
a:link {
color: orange;
}
/*:hover鼠标悬浮*/
a:hover {
color: green;
/*鼠标样式*/
cursor: pointer;
}
/*:active活动状态中(被鼠标点击中)*/
a:active {
color: red;
}
/*:visited访问过的状态*/
a:visited {
color: cyan;
}
二、内容伪类
内容伪类的内容不能被选中
-
-
:after：内容之后
.txt:before {
content: "我是前缀~~~"
}
.txt:after {
content: ">>>我是后缀"
}
三、
-
-
:nth-of-type(n)：类型优先，再匹配位置
/*1.位置从1开始*/
/*2.*/
/*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/
/*body a-baidu div01*/
div:nth-child(2) {
color: green;
}
/*先确定类型,再匹配位置*/
/*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/
div:nth-of-type(2) {
color: cyan;
}
四、取反伪类
除了selector以后的标签中内容操作
- :not(selector)：对selector进行取反
五、案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> a { color: #333; text-decoration: none; } /*:link为一个整体,代表超链接的初始状态*/ a:link { color: orange; } /*:hover鼠标悬浮*/ a:hover { color: green; /*鼠标样式*/ cursor: pointer; } /*:active活动状态中(被鼠标点击中)*/ a:active { color: red; } /*:visited访问过的状态*/ a:visited { color: cyan; } /*普通标签运用: :hover :active*/ .box { width: 200px; height: 200px; background-color: red; } .box:hover { background-color: orange; cursor: pointer; } .box:active { width: 400px; border-radius: 50%; } /*内容伪类*/ .txt:before { content: "我是前缀~~~" } .txt:after { content: ">>>我是后缀" } /*伪类可以单独出现*/ /*:after { content: "呵呵" }*/ /*位置伪类*/ /*1.位置从1开始*/ /*2.*/ /*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/ /*body a-baidu div01*/ div:nth-child(2) { color: green; } /*先确定类型,再匹配位置*/ /*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/ div:nth-of-type(2) { color: cyan; } /*2n*/ /* div ooo div ooo div ooo div ooo div */ /*3n*/ /* div div ooo div div ooo div div ooo */ /*3n - 1*/ /* div ooo div div ooo div div ooo div */ /*取反伪类*/ /*:not([d]) { color: red; } body.body { color: orange; }*/ span:not([d]) { color: red; } </style> </head> <body class="body"> <!-- 1.a标签的四大伪类 --> <a href="./123.html">访问页面</a> <a href="https://www.baidu.com">访问过页面</a> <div class="box">box</div> <!-- 2.内容伪类 --> <div class="txt">原来的文本</div> <!-- 3.位置伪类 --> <div class="wrap"> <span>span01</span> <div>div01</div> <div>div02</div> </div> <!-- 4.取反伪类 --> <span d>12345</span> <span dd>67890</span> </body> </html>