博客

CSS3里的伪类选择器主要为

属性选择器，结构性伪类选择器，状态伪 类选择器，动态伪类选择器，目标伪类选择器；


一、

属性选择器

：

通过html的属性对html标签进行选择。

• 
  E[attr]:{}
  
  只要带有属性名就会被选中；
• 
  E[atter=“”]{}
  
  制定属性名，有指定属性值；
• 
  E[attr~=“”]{}
  
  属性值为为一个词列表，只要包含当前词就会被选中；
  
  
  
  
  
  二、
  
  结构性伪类选择器
  
  ：
  
  选择哪个，选择符就写哪个，（子级标签类型/类名
  
  一致
  
  的情况下）
  
  
  :first-child{}
  
  第一个
  
  
  :last-child{}
  
  最后一个
  
  
  :nth-child(某个数值）{}
  
  val:2n或者even 偶数 2n+1或者odd 奇数；
  
  
  :nth-last-child(某个数值){}
  
  倒数第几个；
  
  
  :only-child{}
  
  当前只有一个元素才会被选择；
  
  （子级和标签类型或者类名
  
  不一致
  
  的情况下）
  
  
  :first-of-type{}
  
  第一个
  
  
  :last-of-type{}
  
  最后一个
  
  
  :nth-of-type(某个数值）{}
  
  val:2n或者even 偶数 2n+1或者odd 奇数；
  
  
  :nth-last-of-type(某个数值){}
  
  倒数第几个；
  
  
  :only-of-type{}
  
  当前只有一个元素才会被选择；
  
  
  
  
  
  三、
  
  状态伪类选择器
  
  ：
  
  
  :enabled
  
  （ form表单中可用状态的元素）
  
  
  :disabled
  
  (form表单中不可用状态的元素）
  
  
  :checked
  
  (form表单中处于选中状态的元素（单选或者多选）)
  
  
  :selection
  
  (被用户选中或处于高亮状态的状态
  
  四、
  
  目标伪类选择器
  
  ：
  
  
  :target{}
  
  当前元素被相关链接（锚点）指向的时候，发生CSS样式的改变；
  
  五、
  
  动态伪类选择器
  
  ：
  
  
  :link
  
  
  链接伪类选择器 (匹配元素定义超链接未被访问过)
  
  
  :visited
  
  
  链接伪类选择器 （匹配元素定义超链接已被访问过）
  
  
  :active
  
  
  用户行为选择器 (匹配元素被激活用于链接描点)
  
  
  :hover
  
  
  用户行为选择器 （点击链接时鼠标松开时的样式）
  
  
  :focus
  
  
  用户行为选择器 （设置用键盘将焦点放在链接时的样式）
  
  （逆战班）