Debug-032-前端F12-查看伪元素的一个小技巧

举个例子：

这张图是elementUI中的一个button按钮，它在被鼠标悬浮的时候是有样式变化的，我想知道它在鼠标悬浮的时候是什么样式？该从哪里找到？

一、：hover

下面是MDN上的定义

步骤：（1）打开F12，找到元素（英文：Elements）,再找到样式（Styles）

        (2)我们先选中这个按钮元素，点开样式中的 :hov按钮,然后选中:hover（选中之后，这个按钮就会被认为是已经触发了hover的效果，然后展示对应的样式，此时鼠标不必再悬浮在此按钮上，因为此时按钮已经被认为是hover状态了）

 

        （3）此时就是这个按钮在鼠标悬浮时的效果，在下面还可以查看CSS代码，我们也可以修改该它。

这里我修改了.el-button:hover中的color，这样鼠标悬浮之后就是粉色。

二、:active

上面截图上hover旁边还有一个:active,下面是MDN上的定义

同理：选中:active之后，这个按钮就会被认为此刻是active的效果，然后展示对应的样式，此时不必点击这个“large”按钮不松开，因为此时就已经是被认为是avtive状态了。）这就是:active的效果

那么如果你想修改active或者hover时的效果可以修改它对应标签的伪元素样式。