伪类选择器与伪元素选择器的区别

伪类选择器与伪元素选择器的区别

1、伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。
例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。
常见伪类选择器：

    :first-child

    :last-child

    :nth-child(n)

    :nth-last-child(n)

    :first-of-type

    :last-of-type

    :nth-of-type(n)

    :nth-last-of-type(n)

    :only-child

    :only-of-type

<ul>
    <li>第一列</li>
    <li>第二列</li></ul>

如果我们想要给第一列添加样式，我们可以通过以下两种方式：

（1）给第一列添加一个类，并在该类中定义样式：

<ul>
    <li class="first-item">第一列</li>
    <li>第二列</li></ul>
    //.first-item{color:orange;}

（2）如果不用添加类的方法，我们可以通过给第一个li标签设置:first-child伪类来为其添加样式，这时，被修饰的li依然存在于DOM树中

<ul>
    <li>第一个</li>
    <li>第二个</li></ul>
    // li:first-child{color:orage;}

2、伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。例如，我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。

常见伪元素选择器：

::after

::before

::first-letter

::first-line

::selection

::placeholder

<p>Hello World, and wish you have a good day!</p>

想要给该段落第一个字母添加样式，可以有以下方法：

（1）給第一个字母包裹span元素，并给span设置样式：

<p><span class="first">H</span>ello World, and wish you have a good day!</p>
// .first{color:red;}

（2）如果不创建span元素，我们可以通过给p元素设置P:first-letter伪元素为其添加样式，这时看起来像创建了一个虚拟的span元素并为其添加样式，但实际上在DOM数中并不存在这个span元素

<p>Hello World, and wish you have a good day!</p>
// p:first-letter{color:red;}

总结：1、伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素。
2、css3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素

伪类选择器与伪元素选择器的优缺点：

优点
1．不占用DOM节点，减少DOM节点数
2.让CSS帮助解决了一些JS的问题，简化开发

缺点
1．不利于调试
2.伪元素只是在视觉效果上添加，但并没有真正的添加到DOM树中，这部分并不能被搜索引擎抓取。