伪类选择器
一 概念
# 伪类选择器
### 1、a标签四大伪类
- :link：未访问状态
- :hover：悬浮状态
- :active：活跃状态
- :visited：已访问状态
### 2、内容伪类
- :before：内容之前
- :after：内容之后
```css
:before, :after {
content: "ctn";
}
```
### 3、索引伪类
- :nth-child(n)：位置优先，再匹配类型
- :nth-of-type(n)：类型优先，再匹配位置
###### v_hint：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始
### 4、取反伪类
- :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>
