css中 : 和 :: 的区别（伪类与伪元素）

css中的 : 指的是伪类，:: 指的是伪元素。

 

伪类	说明
:visited（a:visited）	选择所有已访问的链接
:hover（a:hover）	选择鼠标悬停其上的链接
:active（a:active）	选择活动的链接
:focus（input:focus）	选择获得焦点的 <input> 元素
:link（a:link）	选择所有未被访问的链接
:root（root）	选择元素的根元素
:target（#news:target）	选择当前活动的 #news 元素(点击URL包含锚的名字)
:not()（:not(p)）	选择除了p以外的元素
:first-child（p:first-child）	选择作为其父的首个子元素的每个 <p> 元素
:last-child（p:last-child）	选择作为其父的最后一个子元素的每个 <p> 元素
:nth-child(n)（p:nth-child(2)）	选择作为其父的第二个子元素的每个 <p> 元素
:nth-last-child(n)（p:nth-last-child(2)）	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数
:only-child（p:only-child）	选择作为其父的唯一子元素的 <p> 元素
:first-of-type（p:first-of-type）	选择作为其父的首个 <p> 元素的每个 <p> 元素
:last-of-type（p:last-of-type）	选择作为其父的最后一个 <p> 元素的每个 <p> 元素
:nth-of-type(n)（p:nth-of-type(2)）	选择作为其父的第二个 <p> 元素的每个 <p> 元素
:nth-last-of-type(n)（p:nth-last-of-type(2)）	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:only-of-type（p:only-of-type）	选择作为其父的唯一 <p> 元素的每个 <p> 元素
:checked（input:checked）	选择每个被选中的 <input> 元素
:disabled（input:disabled）	选择每个被禁用的 <input> 元素
:empty（p:empty）	选择所有没有子元素的p元素
:enabled（input:enabled）	选择每个已启用的 <input> 元素
:valid（input:valid）	选择所有具有有效值的 <input> 元素
:out-of-range（input:out-of-range）	选择值在指定范围之外的 <input> 元素
:invalid（input:invalid）	选择所有具有无效值的 <input> 元素
:optional（input:optional）	选择不带 "required" 属性的 <input> 元素
:read-only（input:read-only）	选择指定了 "readonly" 属性的 <input> 元素
:read-write（input:read-write）	选择不带 "readonly" 属性的 <input> 元素
:in-range（input:in-range）	选择具有指定范围内的值的 <input> 元素
:required（input:required）	选择指定了 "required" 属性的 <input> 元素
:lang(language)（p:lang(it)）	选择每个 lang 属性值以 "it" 开头的 <p> 元素
:dir（:dir(rtl|ltr)）	匹配特定文字书写方向的元素（火狐浏览器）

 

伪元素	说明
::first-line（p::first-line）	选择每个 <p> 元素的首行
::first-letter（p::first-letter）	选择每个 <p> 元素的首字母
::before（p::before）	在每个 <p> 元素之前插入内容
::after（p::after）	在每个 <p> 元素之后插入内容
::selection（p::selection）	选择用户选择的元素部分