老徐WEB：CSS伪类和伪元素详解

柔光的暖阳◎ 2023-07-03 04:41 14阅读 0赞

比较常见的伪类有:link、:visited、:hover等，伪元素有:before、:after等，前端开发者多多少少都有接触过，又或者用过但不知道是伪类伪元素的情况。合理正确的利用伪类、伪元素有利于减少对DOM的操作。伪类是基于当前HTML标签（元素）的操作，即作用于整个元素的操作，这是相对伪元素来说的，也是我自己方便记忆的理解。伪类又分为状态伪类和结构性伪类。状态伪类是基于当前HTML标签（元素）状态的操作，根据元素状态的变化呈现不同的样式。常见的状态伪类有：

a:link 作用于未被访问过的元素；
    a:visited 作用于被访问过的元素。
    a:hover 作用于鼠标悬停在元素上时；
    a:active 作用于鼠标点击时的元素；
    :focus 作用于拥有键盘输入焦点的元素，比如p，textarea。
    input:focus
    {
    	background-color:yellow;
    }

下面示例中用到的HTML代码如下：

<div class="box">
    	<h1>First H1*1</h1>
    	<h2>First H2</h2>
    	<span>yyyy</span>
    	<p>xxxx</p>
    	<p class="ft">First p<span>First span*1</span><span>Second span*1<i>First i</i></span><i>First ii</i></p>
    	<p class="ft">Second p<span>First span*2</span></p>
    	<div>First div<strong class="ft">First strong</strong><strong>Second strong</strong></div>
    	<div class="ft">Second div<span>First span*3</span><span>Second span*2</span><i>First i*3</i><i>Second i</i></div>
    </div>

结构性伪类是CSS3新增的，对DOM树元素的操作，合理正确的利用，可以减少id、class的定义。常见的结构性伪类有：

:first-child --- 作用于此元素父级的第一个子元素，同时也是同类元素。

多说一点，之前经常在ul，ol，table里用到first-child，使用很顺利，没有出现过什么问题，自认为掌握了真正用法。这次回头重新学习的时候，还是发现了问题。这次是随便找的HTML结构，不像ul，ol，table那么整齐，子类元素都相同。这次随便找几个不同元素来试试，跟想像的结果不一样，这才决心好好理解一下其用法。first-child的意思是作用于此元素父级的第一个子元素，同时也是同类元素。这里有两层意思，一是此元素的父级的第一个子元素，二是此元素的同类元素。注意：既不是父级的第一个子元素，也不是父级的第一个同类子元素。只有真正理解了其用法，才不会迷惑。

:last-child --- 作用于此元素父级的最后一个子元素，同时也是同类元素。

:nth-child(n) --- 作用于此元素父级的第n个子元素，同时也是同类元素，如果选择第一个，跟first-child意思一样。注意：在第n个的过程中可以不是同类元素，但最后定位的那个子元素一定是同类元素。比如：span:nth-child(3) \{color: \#f00\}/\* 匹配了yyyy \*/

:nth-last-child(n) --- 作用于此元素父级的倒数第n个子元素，同时也是同类元素。注意：在倒数第n个的过程中可以不是同类元素，但最后定位的那个子元素一定是同类元素。比如：span:nth-last-child(3) \{color: \#f00\}/\* 匹配First span\*1，Second span\*2\*/

:nth-of-type(n) --- 作用于此元素父级的第n个同类子元素。注意：只在同类元素中找。比如：span:nth-of-type(1) \{color: \#f00\}/\* 匹配yyyy，First span\*1，First span\*2，First span\*3 \*/

:nth-last-of-type(n) --- 作用于此元素父级的第n个倒数同类子元素。注意：只在同类元素中找。比如：span:nth-last-of-type(2) \{color: \#f00\}/\* 匹配First span\*1，First span\*3 \*/。

:first-of-type --- 作用于此元素父级的第1个同类子元素。注意：只在同类元素中找。

:last-of-type --- 作用于此元素父级的倒数最后1个同类子元素。注意：只在同类元素中找。

:only-child --- 作用于此元素父级的唯一一个子元素，同时也是同类元素，没有其他类型的子元素。比如：span:only-child \{color: \#f00\}/\* 只匹配First span\*2 \*/。

:only-of-type --- 作用于此元素父级的唯一同类子元素，子元素可以有其他类型的元素，only-child是only-of-type的特例。比如：span:only-of-type \{color: \#f00\}/\* 匹配yyyy，First span\*2 \*/

:empty --- 作用于此元素父级的没有任何内容的子元素。比如：p:empty \{width:100px;height:10px;background-color:\#f00\}。示例如下：

<div class="box">
    	<p></p>
    	<h1>First H1*1</h1>
    	<h2>First H2</h2>
    	<span>yyyy</span>
    	<p>xxxx</p>
    	<p class="ft">First p<span>First span*1</span><span>Second span*1<i>First i</i></span><i>First ii</i></p>
    	<p class="ft">Second p<span>First span*2</span></p>
    	<div>First div<strong class="ft">First strong</strong><strong>Second strong</strong><p></p></div>
    	<div class="ft">Second div<span>First span*3</span><span>Second span*2</span><i>First i*3</i><i>Second i</i></div>
    </div>

伪元素是基于HTML元素的部分内容的操作，这是与伪类的区别。常见的伪元素有：

:first-letter --- 作用于此元素文本的第一个字（母），仅适用在块级元素中。  
:first-line --- 作用于此元素文本的第一行，仅适用在块级元素中。  
:before --- 在此元素的前面添加内容。  
:after --- 在此元素后面添加内容。

在CSS2中伪类和伪元素都是用单冒号（:）表示，而在CSS3中伪类还是用单冒号（:），伪元素则用双冒号（::）表示，这点需要注意。