• 什么是css伪类,一个标签可以有几个伪类


    CSS伪类是用来添加一些选择器的特殊效果。

    css伪类有6种,分别为:动态伪类、目标伪类、语言伪类、元素状态伪类、结构伪类、否定伪类。

    1、动态伪类

    不同的状态,使用不同的样式。

    E:link :选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

    E:visited :选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

    E:active :选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上

    E:hover : 选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

    E:focus : 选择匹配的E元素,而且匹配元素获取焦点

    动态伪类包括两种形式:

    锚点伪类,这是一种在链接中常见的样式,如:link、:visited

    行为伪类,也称为用户操作伪类,如:hover、:active和:focus

    2、结构伪类

    这个就比较多了,平时用的也比较频繁。
    E:fisrt-child :作为父元素的第一个子元素的元素E。与E:nth-child(1)等同

    E:last-child :作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

    E:root :选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同

    E F:nth-child(n):选择父元素E的第n个子元素F。其中n可以是整数(1,2,3)、关键字(even,odd)、可以是公式(2n+1),而且n值起始值为1,而不是0.

    E F:nth-last-child(n):选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中:nth-last-child(1)始终匹配最后一个元素,与last-child等同

    E:nth-of-type(n) :选择父元素内具有指定类型的第n个E元素

    E:nth-last-of-type(n):选择父元素内具有指定类型的倒数第n个E元素

    E:first-of-type:选择父元素内具有指定类型的第一个E元素,与E:nth-of-type(1)等同

    E:last-of-tye :选择父元素内具有指定类型的最后一个E元素,与E:nth-last-of-type(1)等同

    E:only-child :选择父元素只包含一个子元素,且该子元素匹配E元素

    3、语言伪类

    E: lang(language):用来匹配使用指定语言的元素。

    4、元素状态伪类

    当元素处于某种状态下时,才起作用,在默认状态下不起作用。
    E:checked:匹配每个选中的输入元素(仅适用于单选按钮或复选框)。

    input[type="checkbox"]:checked{}
    E:enabled:匹配每个启用的的元素(主要用于表单元素)。

    input[type="text"]:checked{}
    E:disabled:匹配每个禁用的的元素(主要用于表单元素)。

    input[type="text"]:disabled{}

    5、目标伪类

    用来匹配页面的URI中某个标识符的目标元素。

    E:target:选择匹配E的所有元素,且匹配元素被相关URL指向。

    URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

    6、否定伪类

    E:not(F):匹配所有除F外的E元素

    例:对form中所有input加边框,但又不想submit也起变化,就可以这样写:

    input:not([type="submit"]) {border: 1px solid red;}

  • 相关阅读:
    for循环中break和continue的区别
    详解vue生命周期及每个阶段适合进行的操作
    ansible部署
    ansible介绍
    jenkins介绍和安装
    查看磁盘型号和内存及raid信息
    shell 概览
    day5 函数和参数
    day4(dict和set)
    day3(if和for)
  • 原文地址:https://www.cnblogs.com/luckyjiu9/p/14018691.html
Copyright © 2020-2023  润新知