a标签的伪类、内容伪类、索引伪类、取反伪类
一、a标签的四大伪类
:link：未访问状态
: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;
}
二、内容伪类
内容伪类的内容不能被选中
:before：内容之前
:after：内容之后
.txt:before {
content: "我是前缀~~~"
}
.txt:after {
content: ">>>我是后缀"
}
三、索引伪类
:nth-child(n)：位置优先，再匹配类型
: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>