伪类选择器和伪元素选择器

我们再讲选择器权重的时候提到了类选择器和伪类选择器权重是一样的那么今天我们就拿出来伪类选择器和伪元素选择器单独讲一下:

伪类选择器:
伪类选择器很简单的理解就是在某种特殊的状态下的样式,比如说“点击链接”这个状态下的样式。比如说“鼠标划过”这个状态下的样式。主流的伪类选择器有5种
link 超链接点击之前
visited 链接被访问过之后
以上两种样式,只能用于超链接。
动态伪类:针对所有标签都适用的样式。如下:
hover “悬停”:鼠标放到标签上的时候
active “激活”: 鼠标点击标签,但是不松手时。
focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)
别逼逼看代码:


当鼠标划过的时候

大家可以写一下代码试一下,更直观一些



伪元素选择器:
伪元素选择器使用后的效果是在不用伪元素选择器的情况下得通过创造一个新的的元素(标签)才能做到
主要的伪元素选择器有以下几种:
为某个元素的第一行文字使用样式。
:first-line
为某个元素中的文字的首字母或第一个字使用样式。
:first-letter
在某个元素之前插入一些内容。
:before
在某个元素之后插入一些内容。
:after
别逼逼看代码

如果现在还对我的伪元素的定义不理解的话,想一想我们不用伪元素的话,什么样的方法可以实现上述效果

你可能感兴趣的:(伪类选择器和伪元素选择器)