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

[haizhilin2013]

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

[tiyunchen]

[abin-jb]

目标元素

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

[poporeki]

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

[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]

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]

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

[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]

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

[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]

目标元素

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

你是不走错片场了

[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]

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]

: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]

伪类	作用
: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]

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

[Iambecauseyouare]

: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]

: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伪类内嵌套其他元素。