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

如题所述

第1个回答  2018-03-09
: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 选择被用户选取的元素部分。本回答被网友采纳
第2个回答  2018-05-28

: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    选择被用户选取的元素部分

本回答被网友采纳
第3个回答  2018-03-09

: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名,前一种就不需要