伪类选择器 您所在的位置:网站首页 结构伪类选择器公式n 伪类选择器

伪类选择器

2023-12-23 22:52| 来源: 网络整理| 查看: 265

伪类选择器用来描述一个元素的特殊状态例如第一个元素、被点击的元素、含有指定属性值的选择器,通常用:开头前边有其他选择器

(1)、结构伪类选择器

1、根据所有子元素进行排序

        :first-child 第一个元素

        :last-child 最后一个元素

        :nth-child 选中第n个元素 特殊值:2n/even偶数位元素 2n+1/2n-1/odd奇数位元素 n是一个大于0的整数

        :nth-last-child 倒着数第n个元素

        :only-child 只有一个子元素时生效

 2、根据所有相同类型的子元素进行排序

        :first-of-type 第一个元素

        :last-of-type 最后一个元素

        :nth-of-type 选中第n个选择器

        :nth-last-of-child 倒着数的第你个选择器       

        :only-of-type 只有一个同类型的元素    

3、  :root  匹配根元素的选择器 效果类似*通配符但它控制的样式都属于继承所以优先级最低

        :empty 匹配没有子元素的选择器

(2)目标伪类选择器

        :target 匹配被指向的元素,通常配合a标签使用,给a的锚点或指向的链接设置:target来实现相应的样式(不是给a设置而是给被指向的元素设置)

(3)UI元素状态伪类元素器

1、form表单中的

:checked 表示选中的状态

:disabled 表示禁用状态

:enabled 表示可以状态

2、通用的

:selection 选中状态或者高亮状态

(4)否定伪类选择器

:not()取消元素的状态,括号里可以写多个元素用,连接

(5)动态伪类选择器

:link 为访问过的链接

:hover 鼠标移入的状态 

:active 鼠标点击的状态

:visited 访问过的链接

:focus 获取焦点时的状态

前四个还可以叫做伪链接选择器



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有