伪类

a:hover 悬浮状态
a:hover{/当光标移动到a标签时发生作用/

          border:2px solid #000000;
      }
<a>我是a链接</a>

:active 激活状态
元素激活状态，按下鼠标左键抬起时触发效果
button:active{border: red}

:focus 聚焦状态
元素聚焦状态，一般当鼠标单击输入框或者使用tab切换到输入框时触发。
input:focus{border: 2px solid red}

:checked 勾选状态
它用于表示

小知识：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

:disabled 禁用状态
它作用于所有被禁用的元素上
input:disabled{outline: #ee9933 1px solid}

:enabled 可用状态
给未禁用的元素上添加元素
input:enabled{outline:2px solid pink}

：empty 空值
给不包含任何子元素或文字的元素添加样式
p:empty{

        outline: 2px skyblue solid;
    }

:first—child 老大
选中一组平行元素中的最先出现的元素。
input:first-child{ color: #ee9933}

:last-child 老末
用于选出一组平行元素中的最后出现的元素
*:last-child{color: red}

:nth-child 第几个
选择一组平行元素中的第n个的元素
input:nth-child(2) {outline: black}

:nth-last-child(n) 反向选择
倒着数选择元素
*:nth-last-child(1){color: blue}

:first-of-type 同类中的第一个
于first-child差不多
其他的还有:last-of-type :nth-of-type :nth-last-of-type()

:not() 排除
选定除了这个元素的所有元素
p:not(.ss){color: yellowgreen} 表示除了class=ss的p元素不修改其他的p元素修改成黄绿色

:only-child 独苗
选中没有同级兄弟的元素即使它是父级元素的唯一子元素
p:only-child{color: plum;}

伪元素

可以为元素批量添加相同的内容

::before 前缀元素
::after 后缀元素
::first-line 首行元素
::first-letter 首字元素
::placeholder 选中占位元素使其修改效果
::selection 选择范围
p::selection{background: pink;color: #ee9933}
鼠标选中文字发生变化