html中伪类的理解

您好，伪 的意思就是假的。他并不是真是写在页面里的代码，是通过css伪类的样式设置来创造的一个元素。

你就记得伪类是用css来创建并控制的，body的代码里是写不出来的。

类是一种数据结构，是面向对象思想的执行者。现代面向对象的语言都支持“类”这种结构。伪类顾名思义就是，不是类的数据结构，因为语言本身不支持（例如vb6.0以前），但是又为了达到类的境界，于是就产生了伪类。通俗点就是伪类和伪娘有些类似，虽然没有女生的本质，但是外表看起来差不多。说到伪娘，让我想到了有一年春节联欢晚会的一首歌名叫做《万水千山总是情》，歌曲荡气回肠，唱出了90后香港回归的热情，唱出了我们穷人的心声。为了支援世博会，请爱护小动物，从我做起，奋发图强，学习雷锋，不怕死的精神。因为明天会更好，愿我们的祖国繁荣富强，夫妻双双把家还。

两者的定义：

伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(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

haorooms

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 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

---