伪类和伪元素的区别

发布网友发布时间：2022-04-28 13:05

我来回答

共2个回答

懂视网时间：2022-04-28 17:26

本篇文章给大家分享关于css伪类和伪元素之间的对比分析，有兴趣的小伙伴可以看一看本文内容。

伪类

伪类是选择HTML文档的某些部分的方式，原则上不是基于HTML文档树本身及其元素，也不是基于名称，属性或内容等特征，而是基于其他抽象条件，如语言编码或动态状态一个元素。

原始伪类定义了随着时间的推移或通过用户干预进入和退出的元素的动态状态。CSS2在此概念上进行了扩展，以包括虚拟概念文档组件或文档树的推断部分，例如first-child。伪类的运作就好像将幻象类添加到各种元素中一样。

限制：与伪元素不同，伪类可以出现在选择器链中的任何位置。

示例伪类代码：

a:link /* 选择未访问过的“a”元素*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* 字体颜色为黑 */
background-color : #99FF99; /* 设置为淡绿色*/
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}
a:visited /* 这将选择任何已访问其目标的“a”元素。*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}
a:hover /* 这将选择处于悬停状态的任何“a”元素。这是指针在元素的渲染区域内移动期间的状态。用户指定元素但不激活它。 */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}
a:focus /* 这将选择当前具有焦点的任何“a”元素。焦点是元素接受键盘输入或其他形式的文本输入的状态。 */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}
a:active /*这将选择处于激活状态的任何“a”元素。活动是指针激活期间的状态（例如：按下并释放鼠标）在元素的渲染区域内*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

伪元素

pseudo-elements用于处理元素的子部分。它们允许您在元素内容的一部分上设置样式，超出文档中指定的内容。换句话说，它们允许定义逻辑元素，这些元素实际上不在文档元素树中。逻辑元素允许在CSS选择器中处理隐含的语义结构。

限制：伪元素只能应用于外部和文档级上下文 - 而不是内嵌样式。伪元素受限于它们可以出现在规则中的位置。它们可能只出现在选择器链的末尾（在选择器的主题之后）。它们应该出现在选择器中找到的任何类或ID名称之后。每个选择器只能指定一个伪元素。要在单个元素结构上处理多个伪元素，必须创建多个样式选择器/声明语句。

伪元素可用于常见的印刷效果，例如初始上限和首字下沉。它们还可以处理源文档中不存在的生成内容（使用“之前”和“之后”）下面添加了属性和值的一些伪元素的示例样式表。

/* 以下规则选择标题1的第一个字母，并将字体设置为2em，草书，绿色背景。第一个字母选择块级元素的第一个呈现的字母/字符。 */
h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}
/* 以下规则选择段落中第一个显示的行并使其变为粗体。第一行选择块级元素的输出设备上的第一个渲染行。 */
p:first-line {
font-weight : bold;
}
/* 以下规则选择在blockquote之前放置的任何内容，并在带有绿色背景的粗体小型大写字母中插入短语“当天的引用：”。 */
blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}
/* 以下规则选择放在“q”元素之前的任何内容并插入智能打开引号。 */
q:before {
content : open-quote;
}
/* 以下规则选择放在“q”元素后面的任何内容并插入智能关闭引用。*/
q:after{
content : close-quote;
}

热心网友时间：2022-04-28 14:34

两者的定义：

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

我自己的理解：

伪类，类，class是一个类，就类似class这样，表示一些元素的状态的，但是无须标识的分类。

伪元素，就是一个元素，类似p标签元素，等等，逻辑上存在，但是实际并不存在在文档树中。

另外一个简单的理解和区分就是：

伪类前面是一个冒号，为元素前面是两个冒号。E:first-child 伪类，E::first-line为元素。

特殊情况::before 和 ::after 伪元素

before 和after是在元素前面和后面添加一些元素，因此是伪元素，CSS3选择器中已经将其前面变为两个冒号了。请看：w3cselect

问题来了，那么为什么我们平时用before和after前面就一个冒号？

当你看了css2选择器就知道了，老的规范中，伪类和伪元素都用一个冒号，新规范为了区分，伪元素统一用两个“：：”,所以，大家注意了，往后在写css3的时候，为元素要用两个冒号，伪类用一个冒号。

伪类和伪元素的应用

我之前的css常用效果，讲了一些。

像伪元素

::-webkit-scrollbar
::selection
::-webkit-input-placeholder
::after

等等。

伪元素中用的最多的要数::after和::before了

可以用这两个伪元素做很多效果！

html

<a href="#">haorooms</a>

css

a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "\5B"; left: -20px; }
a:hover::after { content: "\5D"; right: -20px; }

其中content中可以用attr也可以用url

例如：

a：:after { content:"(" attr(href) ")"; }
h1::before { content: url(logo.png); }

伪类中用的最多的要数：nth-child()选择器了，关于nth-child()，我之前有篇文章介绍过。

总结：

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。