【前端CSS部分】伪类与伪元素

1、伪选择器

伪选择器主要包含两部分：伪类和伪元素

2、伪类

希望在特定状态下，给元素呈现特定的样式。比如：超链接，在链接被点击之后，呈现特定的样式，我们就可以使用:visited这个伪类给超链接添加特定的样式。

伪类的前缀是一个冒号:

– 分类–

2-1、状态伪类

选择器	示例	说明
:link	a:link	选择所有未访问的链接
:visited	a:visited	选择所有访问过的链接
:hover	a:hover	鼠标悬浮在链接上的状态
:active	a:active	选择在激活状态的链接
:focus	input:focus	选择获取焦点的输入框元素

2-2、结构化伪类

选择器	示例	示例说明
:first-child	:first-child	选择p元素的第一个子元素
:first-of-type	p:first-of-type	选择每个父元素是p元素的第一个p子元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not§	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有p元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)

2-3、表单伪类

选择器	示例	示例说明
:disabled	input:disabled	选择所有禁用的表单元素
:enabled	input:enabled	选择没有设置 disabled 属性的表单元素
:required	input:required	选择设置 required 属性的表单元素
:read-only	input:read-only	选择设置 readonly 只读属性的元素
:read-write	input:read-write	选择处于编辑状态的元素；input，textarea 和设置 contenteditable 的 HTML 元素获取焦点时即处于编辑状态。
:checked	input:checked	匹配被选中的 input 元素，input 元素包括 radio 和 checkbox
:empty	p:empty	匹配所有没有子元素的 p 元素
:in-range	input:in-range	选择在指定区域内的元素
:out-of-range	input:out-of-range	选择不在指定区域内的元素
:valid	input:valid	选择条件验证正确的表单元素
:invalid	input:invalid	选择条件验证错误的表单元素
:optional	input:optional	选择没有 required 属性，即设置 optional 属性的表单元素
:default	-	匹配默认选中的元素(提交按钮总是表单的默认按钮)。
:indeterminate	-	当某组中的单选框或复选框还没有选取状态时，:indeterminate 匹配该组中所有的单选框或复选框。
:scope	-	匹配处于 style 作用域下的元素。当 style 没有设置 scope 属性时，style 内的样式会对整个 html 起作用。(试验阶段)

3、伪元素

伪元素和伪类的用法类似，只不过伪元素的前缀是两个冒号::，个别元素可以使用一个冒号

–分类–

3-1、单双冒号

选择器	作用	说明
::before/:before	在被选元素前插入内容。	需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。
::after/:after	在选被元素后插入内容	其用法和特性与:before相似。
::first-letter/:first-letter	匹配元素中文本的首字母。	被修饰的首字母不在文档树中。
::first-line/:first-line	匹配元素中第一行的文本。	这个伪元素只能用在块元素中，不能用在内联元素中。

3-2、双冒号

选择器	作用	说明
::selection	匹配被用户选中或者处于高亮状态的部分.	在火狐浏览器使用时需要添加 -moz 前缀。
::placeholder	匹配占位符的文本。	只有元素设置了 placeholder 属性时，该伪元素才能生效。

::placeholder:该伪元素不是 CSS 的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。在一些浏览器中（IE10 和 Firefox18 及其以下版本）会使用单冒号的形式。

::backdrop:用于改变全屏模式下的背景颜色。全屏模式的默认颜色为黑色。(试验阶段)