CSS 伪元素 是Pseudo-elements。
作用是:向某些选择器设置特殊效果
1.伪元素介绍
伪元素是创造关于文档语言能够指定的文档树之外的抽象。
伪元素不是真正的元素,不存在与文档之中,所以JS无法操作他。
我们可以在外部使用它,但是在文档中并不会生成,可以理解为源代码里面看不到他们。
但是,这确实与其他元素无异,我们可以对他进行其他元素可以有的无差别操作。
注意:因为伪元素的特殊性,伪元素中必须有content,否则毫无意义。
在伪元素中,基本上,每一个我们所添加的元素都不会干扰现有的HTML结构
在美化等方面,伪元素将给我们带来前所未有的体验,甚至可以做到任何事情。
案例:为文字添加引号
1 <style>
2 p:before {
3 content: open-quote;
4 }
5 p:after {
6 content: close-quote;
7 }
8 </style>
9
10 <div >
11 <h1 class="wei">我是伪元素</h1>
12 <p><br>为其添加引号<br></p>
13 </div>
可以看到,我们的 < br >换行符有效,说明伪元素是针对 p 中的文字有效!
2.伪元素的格式
为了区分开来,我们为伪元素加上冒号
selector:pseudo-element {property:value;}
//独立使用
selector.class:pseudo-element {property:value;}
//配合class使用
3.伪元素的分类
所有CSS伪类/元素
选择器 | 示例 | 示例说明 |
---|---|---|
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个 元素的第一个字母 |
:first-line | p:first-line | 选择每个 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <]p> 元素 |
:before | p:before | 在每个元素之前插入内容 |
:after | p:after | 在每个元素之后插入内容 |
:lang(language) | p:lang(it) | 为元素的lang属性选择一个开始值 |
1.:first-line
“first-line” 伪元素用于向文本的首行设置特殊样式。
这个伪元素用于设置元素中的第一行文本的样式,而不论该行出现多少单词。
注释:”first-line” 伪元素只能用于块级元素。
注释:下面的属性可应用于 “first-line” 伪元素:
• font
• color
• background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear
2.first-letter 伪元素
“first-letter” 伪元素用于向文本的首字母设置特殊样式:
这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。某些语言有一些要处理为单个字符的字母组合,如果是这样,用户代理可能会把首字母同时应用到这个字母组合。
注释:”first-letter” 伪元素只能用于块级元素。
注释:下面的属性可应用于 “first-letter” 伪元素:
• font
• color
• background
• margin
• padding
• border
• text-decoration
• vertical-align (仅当 float 为 none 时)
• text-transform
• line-height
• float
• clear
3.”:before” 伪元素可以在元素的内容前面插入新内容。
这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。
1 h1.wei:before {content:'"a"';}
2
3 <div >
4 <h1 class="wei">我是伪元素</h1>
5 </div>
为其添加一个字母a在前面
4.:after 伪元素
“:after” 伪元素可以在元素的内容之后插入新内容。
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。
4.总结
因为专业知识并不强,加上积累还不多,没法将伪元素的魅力展现出来,这里只能先介绍。
当然,还有一个伪类,亦有相同的意思,以后再说。