::selection -选择的是页面上被用户选择的部分。例如我们想copy谋篇文章的文字,选取文字后cril+c。这个选择器就选择的是被选择的文字。例如下图:
:not(selector)-相当于*选择器排除selector选择的部分。注意‘selector’,括号中放的是选择器。
:target- 选择当前活动的目标元素。目标元素:被连接的元素就是目标元素。注意:只能用#名字,目标元素对应id=‘名字’。
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
<p><b>注释:</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>
href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
<p><b>注释:</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>
:empty-选择没有子元素的(包括文本节点)每个元素。
:root-选择文档根元素。在html中,文档根元素始终为html元素。
针对标签------------------------------------------------------------------------------------------------------------------------
*-选择所有元素。
.class-选择所有class为某某的所有元素。
#id-选择所有id为某某的所有元素。
element-选择所有指定元素名称的元素。
element1,element2-用于同时选取多个元素。个数不限中间用,分隔。
element1 element2-用于选取element1元素内部所有的element2元素。
element1>element2-选取特定父元素element1中的element2元素。注意:element1必须是element2的直接父元素。
element1+element2-匹配紧跟在element1后面的(不是内部)element2元素。注意:兄弟关系不能是包含关系。
:before-在被选元素的前面插入内容。注意:通过content属性插入。
:after-在被选元素的后面插入内容。
:lang-选取带有以指定值开头的lang属性的元素。注意:必须是单独的单词。
element1~element2-选择element1后面的所有element2元素。
?:first-of-type 匹配父元素中首个?标签中的的所有元素。选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
?:last-of-type 匹配父元素中最后一个?标签中的所有元素。选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。
?:nth-of-type(n) 匹配父元素中某个特定类型的子元素的第n个中的所有元素。
?:nth-last-of-type(n) 匹配父元素中某个特定类型的元素的第n个元素中的所有元素。倒序。
?:only-of-type 匹配父元素中唯一的?标签中的所有元素。(可以有很多子元素但只能有一个?标签内的所有元素)
?:only-child 匹配父元素中只有一个子元素并且必须是?标签的元素中所有元素。不要?也可以。
?:nth-child(n) 匹配父元素的第n个子元素的所有元素。
?:nth-last-child(n) 匹配父元素的第n个子元素的所有元素。倒着开始。
:first-letter-匹配指定选择器的第一个字母。
:first-line-匹配指定选择器的第一行。
:first-chird-匹配制定选择器的首个子元素。
:last-child -匹配父元素中最后一个子元素。
- 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
- last-child选择符,E必须是它的兄弟元素中的最后一个元素,换言之,E必须是父元素的最后一个子元素。与之类似的伪类还有first-child,只不过情况正好相反,需要它是第一个子元素。
针对属性---------------------------------------------------------------------------------------------------------------------
[attribute]-匹配拥有指定属性的元素。
[attribute=value]-匹配拥有指定值和属性的元素。
[attribute~=value]-匹配指定属性的值中包含指定单词的元素。注意:单独的单词
[attribute*=value]-匹配属性值包含指定值的元素。注意:包含即可,不一定必须是单独的单词。
[attribute|=value]-匹配以指定值开头的属性的所有元素。注意:单独的单词(en-us:正确 enus:不正确)。
[attribute^=value]-匹配以指定值开头的属性的所有元素。注意:包含即可,不一定必须是单独的单词。
[attribute$=value]-匹配以指定值结尾的属性的所有元素。注意:包含即可,不一定必须是单独的单词。
针对链接----------------------------------------------------------------------------------------------------------------------
:link-选择所有未被访问的链接。
:visited-选择所有已被访问的链接。
:active-选择活动链接。活动链接:当在一个连接上点击时,它便成为活动的。
:hover-匹配鼠标放在连接上但未点击的链接。
针对表单元素------------------------------------------------------------------------------------------------------------------
:focus-匹配获得焦点的input元素。
:checked-选择每个被选中的input元素。注意:只针对单选框和复选框。
:disable-选择所有被禁用的元素。注意:大多用在表单元素上。(表单元素:input、textarea、select、option、button)
:enable-选择所有被启用的元素。注意:大多用在表单元素上。