这是我参与更文挑战的第15天，活动详情查看：更文挑战
前两天学习了关于CSS选择器的一些知识点，对于伪类选择器感觉还是一知半解，遂查询网上资料学习，特此进行总结。
关于伪类选择器，其实就是匹配确定状态的元素，也就是在特定状态下才能呈现对应的样式。其他选择器的话可以看这篇《一次性搞懂CSS的选择器》
1、链接伪类：作用域链接元素
:visited：表示作为超链接，指向一个已经访问过的地址的所有锚
a:visited {
color: red;
}
当鼠标点击超链接之后，该a标签会变成红色。
:link：表示超链接指向一个未访问的地址的所有锚
a:link {
color: hotpink;
}
鼠标还没被访问超链接的时候是粉色。
:target ：表示跳转到某个片段，其中id是URI的片段标识符
此时的target要对应id。比如我们通过:target实现一个简单的选项卡
简单CSS选项卡demo：
首先书写html代码，注意此时的a标签href要对应内容div的id。
<body>
<a href="#left">选项卡left</a>
<a href="#middle">选项卡middle</a>
<a href="#right">选项卡right</a>
<div id="left">内容left</div>
<div id="middle">内容middle</div>
<div id="right">内容right</div>
</body>
然后我们先把内容的三个div隐藏起来，
div {
width: 275px;
height: 200px;
display: none;
}
接着使用:target
:target {
display: block;
}
当我们点击选项卡a标签的时候，注意看URI，会加上id，
然后点击的这个选项卡的内容通过display会显示出来。效果如下：
这样一个简单的纯CSS实现的选项卡就做好了，但是这个还是有一点缺陷，就是默认的时候选项卡没有内容，需要我们点击某个选项才会显示。因为默认情况下所有的div都是隐藏起来的。如果大家有想到什么好的办法解决的话欢迎指正我~~
具体代码👇：
<body>
<a href="#left">选项卡left</a>
<a href="#middle">选项卡middle</a>
<a href="#right">选项卡right</a>
<div id="left">内容left</div>
<div id="middle">内容middle</div>
<div id="right">内容right</div>
</body>
<style>
* {
margin: 0;
padding: 50px;
}
a {
text-decoration: none;
color: indigo;
border: 1px gray solid;
padding: 10px;
margin: 10px;
}
a:link {
color: black;
}
a:visited {
color: gray;
}
div {
width: 275px;
height: 200px;
background-color: green;
display: none;
text-align: center;
font: 30px/200px "微软雅黑";
margin-top: 30px;
margin-left: 10px;
}
:target {
display: block;
}
</style>
2、动态伪类
:hover 表示悬浮到元素上
a:hover {
color: black;
}
当鼠标移到元素上时，元素颜色会变成黑色。
:active 表示用户点击时的状态
a:hover {
color: green;
}
当鼠标点击元素上时，元素颜色会变成绿色。
此处还需要注意，由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link,:visited,:hover,:active都作用在a标签时，:link和:visited不能放在最后。我们知道，当有同样的选择器的时候，后面的会覆盖前面的。
另外，对于:visited选择器，出于隐私，只有color,background-color,border-color才该可以改动，不信大家可以尝试一下。
3、表单伪类：
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单
<span>可编辑的表单</span>
<input id="input1" type="text" />
<br/>
<span>被禁用的表单</span>
<input id="input2" type="text" disabled/>
<br/>
<span>聚焦的表单</span>
<input id="input3" type="text" />
<br/>
<span>被选中的表单</span>
<input id="input4" type="checkbox" />
<br/>
#input1:enabled {
background-color: green;
}
#input2:disabled {
background-color: yellow;
}
#input3:focus {
background-color: pink;
}
#input4:checked {
width: 100px;
height: 100px;
}
演示效果👇
有时候原始的单选按钮样式不满足我们的需求时，我们可以通过表单伪类来实现自定义单选按钮。
- 自定义单选按钮demo
<label>
<input type="radio" name="abaaba">
<span></span>
</label>
<label>
<input type="radio" name="abaaba">
<span></span>
</label>
<label>
<input type="radio" name="abaaba">
<span></span>
</label>
* {
margin: 0;
padding: 0;
}
label {
float: left;
position: relative;
width: 50px;
height: 50px;
border: red 2px solid;
overflow: hidden;
border-radius: 50%;
}
label>span {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
input {
position: absolute;
left: -50px;
top: -50px;
}
input:checked+span {
background-color: firebrick;
}
实现效果如下👇
4、结构性伪类
:nth-child(n)
首先n是从1开始的数，n=1,2,3,4
比如下面这段代码：
<div class="container">
<ul>
<p>p标签</p>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
可以看到在ul当中有很多li，并且前面还有个p标签。 再看看我们这个伪类选择器
ul li:nth-child(1) {
font-size: 60px;
}
代表在ul标签下，选中第一个元素，并且这个元素必须是li,样式才会生效。而现在在ul标签下第一个元素并不是li，而是p标签。所以这段代码不会生效。
如果我们换成li:nth-child(2)，代表ul下的第二个元素必须是li,才会生效，可以看到确实生效了。
:nth-of-type(n)
:nth-of-type(n) 代表找到父元素底下的子元素，并且选中第一个该元素的子元素。
同样的，我们按照刚刚那段代码，
ul li:nth-of-type(1) {
font-size: 60px;
}
那么现在这个样式就可以越过P标签，有效了。
:first-child
代表选中第一个子元素。
ul :first-child {
font-size: 60px;
}
:last-child
代表选中最后一个元素。
ul :last-child {
font-size: 60px;
}
那么对伪类选择器就总结到这里啦~如有问题欢迎批评指出。
