CSS入门--伪类和伪元素选择器

伪类和伪元素选择器

除了标签选择器和类选择器之外，伪类和伪元素也是很重要的两种选择器。伪类主要是对元素的整体状态进行设置，在a标签（超链接）里应用的比较多。伪元素选择器一般是对元素的一部分进行选择，接下来我们进行详细的介绍。

伪类分为两种：

• 状态伪类：
  • :link 设置元素未被选中时的状态
  • :visited 设置元素已经点击过的状态
  • :hover 设置元素有鼠标悬停（鼠标放在此元素上面，但未点击）时的状态（除了a标签可以设置在很多的标签选择器之上）
  • :active 设置鼠标点击的瞬间，但鼠标还没松开时的状态
  • :focus 设置此元素获得焦点时的状态，如输入框被鼠标点击选中的状态
• 结构性伪类：
  • :first-child 父元素下的第一个子元素如果刚好是指定元素，则进行设置
  • :last-child  父元素下的最后一个子元素如果刚好是指定元素，则进行设置
  • :first-of-type 设置父元素下的第一个指定元素
  • :last-of-type 设置父元素下的最后一个指定元素
  • :nth-child(number) 父元素下的第number个子元素如果刚好是指定元素，则进行设置
  • :nth-last-child(number) 从最后开始数，父元素下的第number个子元素如果刚好是指定元素，则进行设置
  • nth-of-type(number) 设置父元素下的第number个指定元素
  • nth-last-of-type(number) 从最后一个元素开始数，设置父元素下的第number个指定元素

伪元素选择器：

• ::selection 设置文本在选中状态下的CSS效果
• ::before 设置在元素选择器之前添加指定内容。示例： p::before{ content:"内容";}
• ::after 设置在元素选择器之后添加指定内容
• ::first-line 设置文本的首行的CSS效果
• ::first-letter 设置文本的首字符的CSS效果

以上为列举出的部分伪类和伪元素选择器，还有其他的需求可以查看相关的手册使用。