css中 : 和 :: 的区别(伪类与伪元素)
2022/9/15 23:18:36
本文主要是介绍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) | 选择用户选择的元素部分 |
这篇关于css中 : 和 :: 的区别(伪类与伪元素)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-10通过rz上传到服务器的CSS文件,变了乱码怎么回事-icode9专业技术文章分享
- 2024-10-08CSS-Module教程:入门指南与实践技巧
- 2024-10-01CSS-Module学习:轻松入门与实战技巧
- 2024-09-29CSS6教程:初学者必备指南
- 2024-09-29CSS定位教程:入门与实战指南
- 2024-09-29CSS浮动教程:掌握网页布局的基础技巧
- 2024-09-29CSS选择器教程:初学者必备指南
- 2024-09-29CSS样式教程:初学者必备指南
- 2024-09-27CSS 中的黄金比例
- 2024-09-25CSS大厂面试真题详解及备考指南