Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Apr 20, 2019 · 17 comments
Open

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

haizhilin2013 opened this issue Apr 20, 2019 · 17 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the css css label Apr 20, 2019
@haizhilin2013 haizhilin2013 changed the title [css] [第5天 CSS3新增伪类有哪些并简要描述] [css] 第5天 CSS3新增伪类有哪些并简要描述 Apr 20, 2019
@tiyunchen
Copy link

image

@abin-jb
Copy link

abin-jb commented Jun 14, 2019

目标元素

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

@poporeki
Copy link

poporeki commented Jul 4, 2019

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

@Konata9
Copy link

Konata9 commented Jul 21, 2019

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
Copy link

x011223 commented Aug 14, 2019

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
Copy link

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

@blueRoach
Copy link

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
Copy link

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

@MrZ2019
Copy link

MrZ2019 commented Aug 29, 2020

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
Copy link

目标元素

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

你是不走错片场了

@mono2048
Copy link

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
Copy link

amikly commented Oct 23, 2021

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 表示状态不确定的表单元素

@tk12138
Copy link

tk12138 commented Nov 7, 2021

:root -- 选择文档的根元素,等同于html元素
:empty -- 选择没有子元素的元素
:target -- 选择当前活动的目标元素
:not(selector) -- 选择除selector元素以外的元素
:enabled -- 选择可用的表单元素
:disabled -- 选择禁用的表单元素
:checked -- 选择被选中的表单元素
:after -- 在元素内容最后面添加内容
:before -- 在元素内容最前面添加内容
:nth-child(n) -- 匹配父元素的第n个子元素
:nth-last-child(n), :nth-child(odd), :nth-child(even)
:first-child, :last-child
:nth-of-type(n) -- 匹配父元素下指定子元素,在同类子元素中排第n. :nth-last-of-type(n)

@syfine
Copy link

syfine commented Apr 12, 2022

伪类 作用
:root 选择文档的根元素
:empty 选择没有子元素的元素
:target 选择当前活动的目标元素
:not(selector) 选择除selector以外的元素
:enable 选择可用的表单元素
:disable 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最后面添加内容
:before 在元素内部最后面添加内容
:nth-child(n) 匹配父元素指定子元素,所有子元素中排序第n
:nth-last-child 匹配父元素指定子元素,所有子元素中排序第n,从后向前
:nth-child(odd) 匹配父元素指定子元素,所有奇数
:nth-child(even) 匹配父元素指定子元素,所有偶数
:first-child 匹配父元素的首个子元素
:last-child 匹配父元素的最后一个子元素
:only-child 匹配属于父元素中唯一子元素
:nth-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第n,从后向前数
:selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符

@WangXi01
Copy link

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

@Iambecauseyouare
Copy link

:nth-child(n) 选中父元素下的第n个子元素,n可以接受具体的数值,也可以是函数
:nth-last-child(n) 选中父元素下的第n个子元素,从后开始查找
:last-child 选中最有一个子元素
:only-child 选中父元素下唯一的子元素
:nth-of-type(n) 查找第n个标签的元素,可以为一个函数
:first-of-type 选中父元素下第一个类型的元素
:last-of-type 选中父元素下最后一个类型的元素
:only-of-type 选中父元素下只有一个类型的元素
:empty 选中不包含子元素和内容的元素
:target 选中当前活动的元素
:not 选中非这个元素的每一个元素
:enabled 控制表单控件的禁用状态
:disabled 控制表单的禁用状态
:checked 单选框和复选框被选中

@lili-0923
Copy link

:nth-child(n)和:nth-of-type(n)

这两个伪类可以使我们选择某个元素的第n个子元素或同类型元素,可用于实现页面布局或样式控制。

:not(selector)

:not伪类可以用来排除某些元素,只选择不符合条件的元素。

:checked

:checked可用于表单元素上,选择被选中的元素,常用于复选框和单选框上。

:target

:target可以选择当前活动的锚点,使其具有特殊的样式特效。

:first-child和:last-child

:first-child用于选择当前元素的第一个子元素,:last-child用于选择当前元素的最后一个子元素。

:before和:after伪类

:before和:after伪类可以在元素内容之前或之后插入内容。这些伪类通常用于添加一些特殊的视觉效果,如箭头,图标等等。使用时必须设置content属性,它可以包含纯文本或在before和after伪类内嵌套其他元素。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests