伪类、伪对象、伪元素

伪类

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;
}

16个非常有用的CSS伪选择器