伪类、伪对象、伪元素
伪类
a:link {color: red;} /* 未访问的链接状态,必须给a */
a:visited {color: green;} /* 已访问的链接状态,必须给a */
a:hover {color: blue;} /* 鼠标滑过链接状态,可以随便给 */
a:active {color: yellow;} /* 鼠标按下去时的状态,通常给a 也可以给button或其他按钮元素 */
- 如果是要用全部的伪类选择器，需要按照官方的规定顺序书写,即上面的从上至下的顺序
- 伪类选择器不常用，其中hover用的比较多
语法：自身的选择器:hover{}
语法：父级选择器:hover 子级选择器{}
语法：自身选择器:hover +相邻兄弟选择器{}
语法：自身选择器:hover ~相邻兄弟选择器{}
伪对象/伪元素选择器
选择器::after{content:""} 表示在xxx之后添加内容,content固定搭配,可以不写任何内容
选择器::before{content:""} 表示在xxx之前添加内容,content固定搭配,可以不写任何内容
选择器::first-letter{} 选择到第一个字符
选择器::first-line{} 选择到第一行文本
选择器::selection 鼠标选择文本时候状态改变
伪元素解决弹性盒中的问题
当使用弹性盒布局若主轴上使用justify-content:space-evenly时
可能出现最后一个盒子无法左对齐的情况 此时可以利用伪元素解决该问题
::after {
display: block;
content: "";
width: 60px; /* 宽度为弹性盒里面的盒子宽度 */
height: 0;
}
