ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css中 : 和 :: 的区别(伪类与伪元素)

2022-09-15 13:30:52  阅读:92  来源: 互联网

标签:每个 伪类 元素 选择 child input type 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有