其他分享
首页 > 其他分享> > css中 : 和 :: 的区别(伪类与伪元素)

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

标签:每个,伪类,元素,选择,child,input,type,css
来源: https://www.cnblogs.com/sxww-zyt/p/16696220.html