定义
伪类:
CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。
例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
/* 所有用户指针悬停的按钮 */
button:hover {
color: blue;
}
伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
伪元素:
伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。
下例中的 ::first-line 伪元素可改变段落首行文字的样式。
/* 每一个 <p> 元素的第一行。 */
p::first-line {
color: blue;
text-transform: uppercase;
}
伪类连同伪元素一起,他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(例如 :visited),同样的,可以根据内容的状态(例如在一些表单元素上的 :checked),或者鼠标的位置(例如 :hover 让你知道是否鼠标在一个元素上悬浮)来应用样式。
分类:
伪类:
- :active,将样式添加到被激活的元素。
- :focus,将样式添加到被选中的元素。
- :hover,当鼠标悬浮在元素上方是,向元素添加样式。
- :link,将特殊的样式添加到未被访问过的链接。
- :visited,将特殊的样式添加到被访问的链接。
- :first-child,将特殊的样式添加到元素的第一个子元素。
- :lang,允许创作者来定义指定的元素中使用的语言。
伪元素:
- :first-letter,将特殊的样式添加到文本的首字母。
- :first-line,将特殊的样式添加到文本的首行。
- :before,在某元素之前插入某些内容。
- :after,在某元素之后插入某些内容。
区别:
下面是一个简单的html列表片段:
<ul>
<li>我是第一列</li>
<li>我是第二列</li>
</ul>
如果想要给第一项添加样式,可以在为第一个添加一个类,并在该类中定义对应样式:
<ul>
<li class="first-item">我是第一列</li>
<li>我是第二列</li>
</ul>
li.first-item {
color: orange
}
如果不用添加类的方法,我们可以通过给设置第一个的:first-child伪类来为其添加样式。这个时候,被修饰的元素依然处于文档树中。
li:first-child {
color: orange
}
下面是另一个简单的html段落片段:
<p>Hello World, and wish you have a good day!</p>
如果想要给该段落的第一个字母添加样式,可以在第一个字母中包裹一个元素,并设置该span元素的样式:
<p><span class="first">H</span>ello World, and wish you have a good day!</p>
.first {
font-size: 5em;
}
如果不创建一个元素,我们可以通过设置
的:first-letter伪元素来为其添加样式。这个时候,看起来好像是创建了一个虚拟的元素并添加了样式,但实际上文档树中并不存在这个元素。
<p>Hello World, and wish you have a good day!</p>
p:first-letter {
font-size: 5em;
}
从上述例子中可以看出,伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。
总结:
- 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
- 伪元素本质上是创建了一个有内容的虚拟容器;
- CSS3中伪类和伪元素的语法不同;
- 可以同时使用多个伪类,而只能同时使用一个伪元素;
最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
ttps://gitee.com/vip204888/web-p7)
[外链图片转存中…(img-SCRIRYfT-1627103117973)]
[外链图片转存中…(img-eP9hVJsU-1627103117976)]