基础

梗概:

类似于这种a:link

  1. 前面的a为标签名字, 可以忽略
  2. :冒号为伪类选择器的特征
  3. 冒号后面的link为伪类选择器的关键字, 用于在a标签中选择指定”类别”的标签

注意:

  • css3之前, 伪元素选择器和伪类选择器都是使用单个冒号, 但css3已经将两者区分

链接伪类选择器:

常用的链接伪类选择器:

a:link //选择所有未访问的链接
a:visited //选择所有已经被访问过的链接
a:hover //选择鼠标位于其上的链接
a:active //选择活动链接(鼠标按下,但并未弹起)

1. 说明:

  1. a为html中的链接标签 锚标签 a标签
  2. 如果有多个链接伪类选择器, 则要按照LVHA的顺序添加样式
    1. 即 link - visited - hover - active 助记: Love Hate
  3. :hover手机手指放上去也是可以的

focus选择器:

1. 梗概:

  1. 只针对表单元素

2. 举例说明:

  1. input:focus为选择当前光标所处的input标签

结构伪类选择器:

child::位置选择器

更方便的伪类选择器

逻辑伪类选择器:

child::css 非选择器

伪类大全:

CSS 伪类 (w3school.com.cn)