css伪类选择器

时间:2019-02-16
本文章向大家介绍css伪类选择器,主要包括css伪类选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

css中有许多的伪类选择器,用来实现一些特殊的效果

链接

选择器 实例 说明
link a:link 选择所有未访问的链接
visited a:visited 选择所有访问过的链接
hover a:hover 鼠标放在上面的状态
active a:active 正在活动的链接
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意:

  1. 在css定义中a标签的hover必须放在linkvisited之后,才是有效的。
  2. 在css中a标签的active 必须放在hover之后才有效,其他标签不受限制。
  3. linkvisited只能用在a标签中

标签、元素查找类

选择器 实例 说明
:first-child p:first-child 选择器匹配属于任一元素的第一个子元素的p标签
:first-line p:first-line 选择每个p元素的第一行
:first-letter p:first-letter 选择每个p元素的第一个字母
:first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not§ 选择所有p以外的元素

进行标签状态的操作

选择器 实例 说明
:hover p:hover 鼠标放在元素上的操作
:active p:active 鼠标选中该元素的操作
:focus input:focus input选中焦点的操作

注意:
focus只适用于有几焦点的元素。

标签位置的操作

选择器 实例 说明
:before p:before 在p标签前面进行的操作
:after p:after 在p标签后面进行的操作