伪元素和伪类虽然只有一字只差,但是差别确实是存在的,对于如何区别一个元素是不是伪类或者伪元素可能对于很多CSS老手来说也不见得都知道。当然我之前也是么模模糊糊的不清楚,但是当我查阅文档之后发现,还是有很多的不同的,那么今天咱们就在这里唠唠。 那么现在在这里说一下,为啥很多人分不清伪类何为元素,这是因为他们的写法太相似咧,都是通过一个":"来开头的,所有很多人见到以":"来开头的”东西“就说是伪类。 不管是伪类还是伪元素,都属于CSS选择器的范畴。 下面来看栗子

<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

如果我要选择li1这个元素给他设置一个红色; 如果是普通的设置肯定是给第一个设置一个class

<ul>
    <li class="red">li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

像这样婶儿(shei)的,然后设置一个color等于red;

ul li.red{
color:red;
}

如果你有个严(bian)谨(tai)的经理,让你不加类继续实现这个效果呢。那你就可以通过下面这样的方式来实现了。

ul li:first-child{
color:red;
}

========================= 再如果,你严(bian)谨(tai)的经理让你实现这样的效果,

<div>
    我是第一行的。<br>
    我是第二行的。<br>
    我是第三行的。<br>
</div>

把“ 我是第一行的。”这一行的颜色变成绿色。 咋办捏,so easy 给第一行加个span啊

<div>
    <span>我是第一行的。</span><br>
    我是第二行的。<br>
    我是第三行的。<br>
</div>
span{
color:red;
}

第一行果然妥妥的变色了。 咋样,还行么。。。 好吧,你也知道,现在应该是严(bian)谨(tai)的经理出场的时候了。 不要加元素咋办。。。。 看哥的。。

div:first-line{
color:red;
}

咋样。妥妥的 服不、。

============================= 当然看到这里,聪明的你,也就明白咧,啥叫伪元素,啥叫伪类咧。 伪元素和伪类唯一的区别就是,是否可以用新建元素的方式达到效果。 伪元素就是需要新建一个元素来达到某种效果。 而伪类则是需要新建一个类来达到某种效果咧。。

CSS3 中为了避免这种混淆,已经做出了调整。用":"(一个点)表示伪类,用"::"(两个点)表示伪元素了。当然如果说你就是任(bu)性(dong)不(qu)这(fen)么去做的话也没问题,CSS3也是可以识别的,这种只是建议写法。 这就是今天的所有内容。。。