高级选择器和伪元素
伪类选择器之状态类
：checked :checked改变的是表单被选中时的样式
<style>
input:checked {
width: 200px;
height: 200px;/*改变按钮的尺寸*/
}
</style>
<body>
<input type="radio" name="ch" checked>
</body>
:visited已访问的链接
:hover鼠标悬停
:active鼠标按下未抬起
:focus选中时改变
<style>
a:visited {
color: yellow; /*active 等也类似*/
}
</style>
<body>
<a href="#">百度百度百度一下</a>
</body>
a:focus {
background: pink;
}
<body>
<a href="#"></a>
</body>
伪类选择器之结果类
nth-child()既要满足选择前面的需求，其次要是父级中的第几个（）中是带n的公式，但是带n部分必须写在前面。
<style>
li:nth-child(3n+1) {
color: red;
}
li:nth-child(3n+2) {
color: pink;
}
li:nth-child(3n) {
color: blue;
}
</style>
<body>
<ul>
<li>00001</li>
<li>00002</li>
<li>00003</li>
<!--<div></div>-->
<li>00004</li>
<li>00005</li>
</ul>
</body>
:nth-of-type()首先要满足选择前面的需求，其次是在该选择器中排序，不同于nth-child,nth-of-type的排序是对：前面的进行排序。而nth-childs是对里面的元素进行排序。
<style>
li:nth-of-type(1) {
color: red;
}
li:nth-of-type(2) {
color: green;
}
li:nth-of-type(3) {
color: blue;
}
li:nth-of-type(4) {
color: yellow;
}
li:nth-of-type(5) {
color: pink;
}
</style>
<body>
<ul>
<li>00001</li>
<li>00002</li>
<li>00003</li>
<div></div>
<li>00004</li>
<li>00005</li>
</ul>
</body>
：first-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 必须是第一个，且是选择器前的结构 */
/*first-type-child 多了一个type和前面的ntn-type-child类似*/
li:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<!-- <div></div> -->
<li>00001</li>
<li>00002</li>
<li>00003</li>
<li>00004</li>
<li>00005</li>
</ul>
</body>
</html>
属性选择器
<title></title>
<style>
/* ~包含属性为XXX的元素 */
[class~="text"] {
color: pink;
}
[type~="text"] {
display: block;
width: 200px;
height: 200px;
}
/* ^属性以XXX开头的标签 */
[class^="t"] {
background-color: lightblue;
}
/* $属性以XXX结尾的标签 */
[class$="t"] {
font-size: 30px;
}
/* *属性包含XXX的标签，概念比~模糊 */
[class*="t"] {
background-color: red;
}
</style>
伪元素
div::before {
/* 伪元素必须要有content，没有内容引号内就为空的 在内容前面添加伪元素*/
content: '';
/* 伪元素是行内的特性 */
display: block;
width: 100px;
height: 50px;
background-color: #abcdef;
}
div::after {
/* 伪元素必须要有content，没有内容引号内就为空的 在内容后面添加伪元素*/
content: '';
/* 伪元素是行内的特性 */
display: block;
width: 100px;
height: 50px;
background-color: red;
}
/* 伪元素用的最多的就是清除浮动，不会影响seo */
ul::after {
content: "";
display: block;
clear: both;
}
<body>
<div>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<!-- <div></div> -->
</ul>
</body>