伪类选择器与伪元素选择器的区别
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树中,这部分并不能被搜索引擎抓取。