:before

:before 选择器用于在被选元素的内容前面插入内容或样式。
可以通过 content 属性来指定要插入的内容。
实例：https://www.w3school.com.cn/tiy/t.asp?f=css_sel_before_style

:hover

选择鼠标指针浮动在其上的元素，并设置其样式。

补充：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

  1. a:link    {color:blue;}  /* 未被访问 */
  2. a:visited {color:blue;}  /* 已访问 */
  3. a:hover   {color:red;}  /* 悬浮 */
  4. a:active  {color:yellow;} /* 活动链接（即点击一个链接时） */

实例：https://www.w3school.com.cn/tiy/t.asp?f=css_sel_link_more1

:checked

:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。

element>element

用于选取带有特定父元素的元素。
例如想选取父元素是 <div> 元素的每个 <p> 元素，并设置其背景色：

  1. div>p{
  2.     background-color:yellow;
  3. }

~和+

波浪选择器 ~ 用来选择所有匹配到的兄弟元素。
加号选择器+ 用于选取第一个指定的元素之后（不是内部）紧跟的元素。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <style>
  5.     div+p{
  6.         background-color:yellow;
  7.     }
  8.     </style>
  9. </head>
  11. <body>
  12.     <h1>欢迎来到我到的主页</h1>
  13.     <div>
  14.         <p>我是唐老鸭。</p>
  15.         <p>我住在 Duckburg。</p>
  16.     </div>
  17.     <p>我最好的朋友是米老鼠。</p>
  18.     <p>我的样式不会改变。</p>
  19. </body>
  20. </html>

效果：
image.png
二者区别：

X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。