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

比较常见的伪类有: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中伪类还是用单冒号（:），伪元素则用双冒号（::）表示，这点需要注意。

来源：CSDN

作者：老徐WEB

链接：https://blog.csdn.net/uvyoaa/article/details/104141549

标签

hover

css

css样式