CSS总结-------伪元素

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>

CSS总结-------伪元素_第1张图片

可以看到,我们的 < 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           

class="wei">我是伪元素

5 div>

为其添加一个字母a在前面

4.:after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

4.总结

因为专业知识并不强,加上积累还不多,没法将伪元素的魅力展现出来,这里只能先介绍。

当然,还有一个伪类,亦有相同的意思,以后再说。

你可能感兴趣的:(CSS)