• css中伪类/伪元素详解


    一、伪类和伪元素

    伪类和伪元素都是用来修饰不在文档树中的部分,区别在于,

    伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active)。

    伪元素则用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after)。


    二、常用伪类

    伪类

    用法

    兼容

    :link

    未访问的链接

    主流浏览器都支持

    :visited

    已访问的链接

    主流浏览器都支持

    :hover

    鼠标划过链接

    主流浏览器都支持

    :active

     已选中的链接

    主流浏览器都支持

    :focus

    选择元素输入后具有焦点

    主流浏览器都支持,IE8中必须申明<!DOCTYPE>

    :enabled

    元素可用状态下

    IE8及更早版本不支持

    :disabled

    元素禁用状态下

    IE8及更早版本不支持

    :checked

    元素选中状态下

    IE8及更早版本不支持

    :first-child

    选择元素的第一个子元素

    主流浏览器都支持,IE8或更早版本中必须申明<!DOCTYPE>

    :last-child

    选择元素的最后一个子元素

    IE8及更早版本不支持

    :nth-child()

    选择元素的一个或多个特定的子元素

    IE8及更早版本不支持

    :nth-last-child()

    从这个元素的最后一个子元素开始选择元素的一个或多个特定的子元素

    IE8及更早版本不支持

    :nth-of-type()

    选择指定的元素

    IE8及更早版本不支持

    :nth-last-of-type()

    从这个元素的最后一个子元素开始选择指定元素

    IE8及更早版本不支持

    :first-of-type

    选择一个上级元素下的第一个同类子元素

    IE8及更早版本不支持

    :last-of-type

    选择一个上级元素下的最后一个同类子元素

    IE8及更早版本不支持

    :only-child

    选择父级元素下的唯一一个子元素

    IE8及更早版本不支持

    :only-of-type

    选择父元素下的唯一一个相同类型的子元素

    IE8及更早版本不支持

    :empty

    选择元素里面没有任何内容的元素

    IE8及更早版本不支持

    :not()

    选择除了某个元素以外的其他元素

    IE8及更早版本不支持

    :lang

    为不同的语言定义特殊的规则

    主流浏览器都支持,IE8中必须申明<!DOCTYPE>

    :target

    设置元素被设置为锚链接的目标元素时候的样式

    IE8及更早版本不支持

    :default

    设置表单的默认样式

    IE8及更早版本不支持

    :valid

    设置有效的表单元素

    IE8及更早版本不支持

    :invalid

    应用于空的必填的,或者验证失败的表单

    IE8及更早版本不支持

    :required

    应用于具有required属性的表单元素

    IE8及更早版本不支持

    :optional

    应用于没有required属性的表单元素

    IE8及更早版本不支持

    :in-range

    应用于具有范围的限制的元素,比如number表单

    IE8及更早版本不支持

    :out-of-range

    与:in-range相反,指定超出范围时的样式

    IE8及更早版本不支持

    :read-only

    应用于内容只读的元素

    IE8及更早版本不支持

    :read-write

    应用于可供用户修改的元素

    IE8及更早版本不支持

    :root

    指向根元素,即html元素

    IE8及更早版本不支持

     
     

    三、常用伪元素 

    伪元素

    说明

    兼容

    ::first-line

    选择元素的第一行

    主流浏览器都支持

    ::first-letter

    选择文本块的第一个字母

    主流浏览器都支持

    ::before

    给元素的前面插入内容

    IE8及更早版本不支持

    ::after

    给元素的后面插入内容

    IE8及更早版本不支持

    ::selection

    用来改变浏览网页选中文的默认效果

    IE8及更早版本不支持

    ::placeholder

    ::-webkit-input-placeholde

    ::-moz-placeholder

    :-ms-input-placeholder

    设置一个表单元素的占位文本 

    IE8及更早版本不支持

  • 相关阅读:
    猫与老鼠的故事(委托)
    返回类型协变和参数类型逆变
    HTTP 方法:GET 对比 POST
    Ajax
    django(未解决的问题)
    mysql开机启动
    apache的不同路径conf/httpd.conf有什么区别【转载】
    Apache部署Django过程中遇到的一些问题
    执行django-admin.py startproject XXX报错的问题
    yum安装软件的过程中出现的一些问题
  • 原文地址:https://www.cnblogs.com/ombre/p/7506217.html
Copyright © 2020-2023  润新知