css3伪元素有：1、“::after”，可在指定元素的后面插入一些内容；2、“::before”；3、“::first-letter”；4、“::first-line”；5、“::selection”；6、“::placeholder”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
伪元素是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式，或者在元素之前、之后插入一些内容等等。
在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号:与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。
selector::pseudo-element { property: value;}
登录后复制
其中，selector 为选择器，pseudo-element 为伪元素的名称，property 为 CSS 中的属性，value 为属性对应的值。
立即学习“前端免费学习笔记（深入）”；
CSS 中提供了一系列的伪元素，如下表所示：
伪元素 例子 例子描述::afterp::after在每个
元素之后插入内容
::beforep::before在每个
元素之前插入内容
::first-letterp::first-letter匹配每个
元素中内容的首字母
::first-linep::first-line匹配每个
元素中内容的首行
::selectionp::selection匹配用户选择的元素部分::placeholderinput::placeholder匹配每个表单输入框（例如 ）的 placeholder 属性
1. ::after
伪元素 ::after 能够在指定元素的后面插入一些内容，在 ::after 中需要使用 content 属性来定义要追加的内容，而且在 ::after 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空””）。
下面通过一个示例来演示伪元素 ::after 的使用：
nbsp;html> p.one::after { content:""; display: inline-block; width: 50px; height: 10px; background: blue; } p.two::after { content:"要插入的内容"; color: red; font-size: 6px; } p.three::after { content: url('./smiley.gif'); position: relative; top: 8px; } 伪元素 ::after
伪元素 ::after
伪元素 ::after
登录后复制
运行结果如下图所示：
2. ::before
伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似，::before 中也需要使用 content 属性来定义要追加的内容，而且在 ::before 中必须定义 content 属性才会生效（没有需要插入的内容时可以将 content 属性的值定义为空””）。
下面通过一个示例来演示伪元素 ::before 的使用：
nbsp;html> p.one::before { content:""; display: inline-block; width: 50px; height: 10px; background: blue; } p.two::before { content:"要插入的内容"; color: red; font-size: 6px; } p.three::before { content: url('./smiley.gif'); position: relative; top: 8px; } 伪元素 ::before
伪元素 ::before
伪元素 ::before
登录后复制
运行结果如下图所示：
3. ::first-letter
伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 ::first-letter 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。
下面通过示例来演示伪元素 ::first-letter 的使用：
nbsp;html> p::first-letter{ font-size: 2em; color: blue; } 伪元素 ::first-letter
登录后复制
运行结果如下图所示：
4. ::first-line
伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。
下面通过示例来演示伪元素 ::first-line 的使用：
nbsp;html> p::first-line{ font-size: 1.5em; color: blue; font-weight: bold; } 伪元素 ::first-line 用来设置指定元素中内容第一行的样式，与 ::first-letter 类似，伪元素 ::first-line 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。
登录后复制
运行结果如下图所示：
5. ::selection
伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。
下面通过示例来演示伪元素 ::selection 的使用：
nbsp;html> p::selection{ color: red; background-color: #CCC; } 伪元素 ::selection 用来设置对象被选中时的样式，需要注意的是，伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定义该属性）等属性。
登录后复制
运行结果如下图所示：
6. ::placeholder
伪元素 ::placeholder 用来设置表单元素（、
nbsp;html> input.text::placeholder{ color: red; background-color: #CCC; } 未使用伪元素 ::placeholder
使用伪元素 ::placeholder 的效果
登录后复制
运行结果如下图所示：
（学习视频分享：css视频教程、web前端）
以上就是css3伪元素有哪些的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2936235.html
