• html伪类与伪元素选择器


    什么是伪类:

    伪类用于定义元素的特殊状态。

    例如,它可用于:

    • 当用户将鼠标悬停在元素上时为其设置样式
    • 样式访问和未访问的链接不同
    • 在获得焦点时设置元素的样式

    伪类的用法:伪类:{

                                        }

    伪类的种类:

    /*链接伪类*/ 注意:link:visited:target是作用于链接元素的!

    :link 表示作为超链接,并指向一个未访问的地址的所有锚

    :visited 表示作为超链接,并指向一个已访问的地址的所有锚

    :target 代表一个特殊的元素,它的idURI的片段标识符

    /*动态伪类*/ 注意:hover:active基本可以作用于所有的元素!

    :hover 表示悬浮到元素上

    :active 表示匹配被用户激活的元素(点击按住时)

    /* 隐私与:visited选择器*/

    只有下列的属性才能被应用到已访问链接:

    color

    background-color

    border-color

    由于a标签的:link:visited可以覆盖了所有a标签的状态,所以当:link:visited:hover:active同时出现在a标签

    身上时 :link:visited不能放在最后!!!

    所以一般顺序为:LVHA

    /*表单相关伪类*/

    :enabled 匹配可编辑的表单

    :disable 匹配被禁用的表单

    :checked 匹配被选中的表单

    :focus 匹配获焦的表单

    /*结构性伪类*/

    i下面的ndex的值从1开始计数!!!!

    index可以为变量n(只能是n)

    index可以为even odd

    #wrap ele:nth-child(index) 表示匹配#wrapindex的子元素 这个子元素必须是ele

                       

    #wrap ele:nth-of-type(index) 表示匹配#wrap中第indexele子元素

        

    :nth-child(index)系列

    :first-child

               比如:  P:first-child 选中的是,每个标签的第一个儿子是p的标签!

    :last-child   

               比如:  P:first-child 选中的是,每个标签的最后一个儿子是p的标签!

    :nth-last-child(index)

    :only-child

    (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

    :nth-of-type(index)系列 

    :first-of-type

    :last-of-type

    :nth-last-type(index)

    :only-of-type 

    (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

    除此之外:nth-child和:nth-of-type有一个很重要的区别!!

    个人总结:nth-of-type以儿子元素为中心,nth-child是以父亲元素为中心!!!

             解释:如果父亲元素参杂其他元素,nth-child会将其他元素也算进去,但是nth-of-type不会

             例子:

                                                           

            结论:都是2,但是结果却不同

    :not

    :empty(内容必须是空的,有空格都不行,有attr没关系)

    /*伪元素*/

    ::after  在元素最后添加内容  内容添加:content:“要添加的内容”

    ::before   在元素最前添加内容  内容添加:content:“要添加的内容”

    ::firstLetter 选择文本的第一个单词

    ::firstLine  选择文本的第一行

    ::selection 就是选择文本时(就是要复制时触发)

           

                                                                                                                                         以上是自己以前学习的心得,然后又更新和解释

      

  • 相关阅读:
    LeetCode 560 和为 K 的子数组
    idea使用技巧汇总
    【Kafka核心技术与实战】导读
    如何永久关闭 Mybase8 登录弹窗(license提醒)
    分析Edk2启动流程
    OEE计算
    线段树分治学习笔记
    linux 安装PostgreSql 12[转]
    Linux中redis数据备份和迁移【转】
    DataGrid控件自动显示行号
  • 原文地址:https://www.cnblogs.com/zhangjiayimy/p/9876440.html
Copyright © 2020-2023  润新知