html 5 的CSS3新增的伪类选择器还包括哪些?

发布网友发布时间：2022-04-06 10:30

共3个回答

热心网友时间：2022-04-06 11:59

:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
:not(selector) :not(p) 选择非 <p> 元素的每个元素。
::selection ::selection 选择被用户选取的元素部分。

热心网友时间：2022-04-06 13:17

:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。

:root :root 选择文档的根元素。

:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。

:target #news:target 选择当前活动的 #news 元素。

:enabled input:enabled 选择每个启用的 <input> 元素。

:disabled input:disabled 选择每个禁用的 <input> 元素。

:checked input:checked 选择每个被选中的 <input> 元素。

:not(selector) :not(p) 选择非 <p> 元素的每个元素。

::selection ::selection 选择被用户选取的元素部分

热心网友时间：2022-04-06 14:52

:first-of-type    p:first-of-type    选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type    p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type    p:only-of-type    选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)    p:nth-last-child(2)    同上，从最后一个子元素开始计数。
:nth-of-type(n)    p:nth-of-type(2)    选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。
:root    :root    选择文档的根元素。
:empty    p:empty    选择没有子元素的每个 <p> 元素（包括文本节点）。
:target    #news:target    选择当前活动的 #news 元素。
:enabled    input:enabled    选择每个启用的 <input> 元素。
:disabled    input:disabled    选择每个禁用的 <input> 元素
:checked    input:checked    选择每个被选中的 <input> 元素。
:not(selector)    :not(p)    选择非 <p> 元素的每个元素。
::selection    ::selection    选择被用户选取的元素部分。

CSS3新增选择器

css3选择器是在css2.0的基础上的修改创新。他增加了一些UI元素状态伪类选择器、结构伪类选择器、属性选择器等。Css3新增的这些选择器很多强大，他的出现给我们前端带来了好多便利。
一、使我们的网页代码更简洁、结构更加清晰，结构清晰就会有利于SEO（搜索引擎）的优化，代码简洁说明代码会少，代码少文件就会小，占用的网络带宽就会少，那么网页的加载速度就会快，用户体验度就会更好。例如：:first-child是用来选择某个元素的第一个子元素，比如你想让列表中的"1"具有与众不同的样式，我们就可以使用:first-child来实现：
li:first-child {background: #ff0;}
在没有这个选择器出现之前，我们都需在要第一个li上加上一个不同的class名，比如说“first”，然后在给他应用不同的样式
li.first {background: #ff0;}
其实这两种最终效果是一样的，只是后面这种，我们需要在html增加一个额外的class名，前一种就不需要