Fe-interview: [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 选择连空格都没有的元素

[Feafortecsy]

| 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单选框或复选框被选中。

[MrZ2019]

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 选择连空格都没有的元素