Skip to content

[css] 第5天 CSS3新增伪类有哪些并简要描述 #14

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第5天 CSS3新增伪类有哪些并简要描述

Activity

changed the title [-][css] [第5天 CSS3新增伪类有哪些并简要描述][/-] [+][css] 第5天 CSS3新增伪类有哪些并简要描述[/+] on Apr 20, 2019
tiyunchen

tiyunchen commented on May 28, 2019

@tiyunchen

image

abin-jb

abin-jb commented on Jun 14, 2019

@abin-jb
目标元素

url种锚指向文档内某个具体的元素,这个被链接的元素就是目标元素

poporeki

poporeki commented on Jul 4, 2019

@poporeki
:not 
:nth-child()
:first-child
:last-child
:disabled
:checked
:empty
:only-child
Konata9

Konata9 commented on Jul 21, 2019

@Konata9

CSS3 中规定伪类使用一个 : 来表示;伪元素则使用 :: 来表示。

CSS3 中新增的伪元素有以下这些:

  • :first-child / :last-child 表示子元素结构关系的
  • :nth-child() / nth-last-child() 用来控制奇数、偶数行的(控制表单奇数、偶数行的样式)
  • :first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
  • :nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
  • :root html 根元素
  • :not() 否定选择器,用的比较多
  • :only-child 只有一个子元素时才会生效
  • :empty 选择连空格都没有的元素
x011223

x011223 commented on Aug 14, 2019

@x011223
CSS3伪类 作用
:root 文档根元素,总是返回html
:last-child, :only-child, :only-of-type 文本的最后一个 / 唯一一个 / 指定类型的唯一一个 子元素
:nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), 第n个 / 倒数第n个 / 指定类型的第n个 / 指定类型的倒数第n个 子元素
:enabled, :disabled 启用 / 禁用
:checked 已勾选
:default 默认,例如radio group中默认选中的radio
:valid, :invalid, :required, :optional, :in-range, :out-of-range 校验有效 / 校验无效 / 必填 / 非必填 / 限定范围内 / 限定范围外的 input
:not() 括号内条件取反
:empty 没有子元素的元素
:target URL片段标识符指向的元素
weizhanzhan

weizhanzhan commented on Sep 20, 2019

@weizhanzhan

我用的不太多,常用的:last-child,:first-child,取最后一个元素和第一个元素,如果排除他们就用:not();
奇数列:nth-child(2n+1),偶数列:nth-child(2n);上面好多没用过的哈哈 学习了

blueRoach

blueRoach commented on May 19, 2020

@blueRoach

first-of-type
last-of-type
only-of-type
only-child
nth-child()
nth-last-child()
nth-of-type()
nth-last-of-type()
last-child
empty
target
not
enabled
disabled
cheked

giggleCYT

giggleCYT commented on May 29, 2020

@giggleCYT

:first-of-type 选择属于其父元素的首个指定元素的每个指定元素。
:last-of-type 选择属于其父元素的最后指定元素的每个指定元素。
:only-of-type 选择属于其父元素唯一的指定元素的每个指定元素。
:only-child 选择属于其父元素的唯一子元素的每个指定元素。
:nth-child(2) 选择属于其父元素的第二个子元素的每个指定元素。
:enabled:disabled 控制表单控件的禁用状态。
:checked单选框或复选框被选中。

smile-2008

smile-2008 commented on Aug 29, 2020

@smile-2008

CSS3 中规定伪类使用一个 : 来表示;伪元素则使用 :: 来表示。

CSS3 中新增的伪类有以下这些:

:first-child / :last-child 表示子元素结构关系的
:nth-child() / nth-last-child() 用来控制奇数、偶数行的(控制表单奇数、偶数行的样式)
:first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
:nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
:root html 根元素
:not() 否定选择器,用的比较多
:only-child 只有一个子元素时才会生效
:empty 选择连空格都没有的元素

pangyutong

pangyutong commented on Mar 22, 2021

@pangyutong
目标元素

url种锚指向文档内某个具体的元素,这个被链接的元素就是目标元素

你是不走错片场了

mono2048

mono2048 commented on May 21, 2021

@mono2048

CSS3 中新增的伪元素有以下这些:

:first-child / :last-child 表示子元素结构关系的
:nth-child() / nth-last-child() 用来控制奇数、偶数行的(控制表单奇数、偶数行的样式)
:first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
:nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
:root html 根元素
:not() 否定选择器,用的比较多
:only-child 只有一个子元素时才会生效
:empty 选择连空格都没有的元素
amikly

amikly commented on Oct 23, 2021

@amikly

CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态

伪类 作用
:target 代表一个唯一的页面元素(目标元素),其id 与当前URL片段匹配
:root 匹配文档树的根元素。对于 HTML 来说,:root 表示 元素,除了优先级更高之外,与 html 选择器相同
:nth-child() 首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序, 选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)
:nth-last-child() 从兄弟节点中从后往前匹配处于某些位置的元素 和 :nth-child 基本一致, 但它是从结尾计数, 而不是从开始计数
:nth-of-type() 针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置
:nth-last-of-type() 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素,其中 n 为正值或零值 基本上和 :nth-of-type 一样,只是它从结尾处反序计数,而不是从开头处
:last-child 代表父元素的最后一个子元素
:first-of-type 表示一组兄弟元素中其类型的第一个元素
:last-of-type 表示了在(它父元素的)子元素列表中,最后一个给定类型的元素
:only-child 匹配没有任何兄弟元素的元素
:only-of-type 代表了任意一个元素,这个元素没有其他相同类型的兄弟元素
:empty 代表没有子元素的元素,子元素只可以是元素节点或文本(包括空格),注释或处理指令都不会产生影响。
:not() 用来匹配不符合一组选择器的元素,由于它的作用是防止特定的元素被选中,它也被称为反选伪类
:enabled 表示任何被启用的(如选择、点击或接受文本输入,或者能够获取焦点)元素
:disabled 表示任何被禁用(不能被激活,如选择、点击或接受文本输入,或获取焦点)的元素
:checked 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项)
:indeterminate 表示状态不确定的表单元素

6 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@WangXi01@blueRoach

        Issue actions

          [css] 第5天 CSS3新增伪类有哪些并简要描述 · Issue #14 · haizlin/fe-interview