如何仅将一个html元素应用于悬停的CSS类

Question

我的跨度如下：

<span  class="fa fa-fw fa-close">

，我想将鼠标悬停在红色处， 当我创建CSS类时：

.fa-close:hover{color :red;}

它适用于所有使用fa-close的跨度，但是我希望仅将其应用到一个跨度。我该怎么办？

Answer 1

为要应用红色的特定span添加额外的类

例如

HTML

<span  class="fa fa-fw fa-close extra">

和CSS之类的

.fa-close.extra {color :red;}

因此，现在，无论您想应用红色在哪里，都可以添加此类。

  

希望这会有所帮助：）

根据采购订单要求更新

如果您只想在悬停时显示红色，则代码如下所示

HTML

<span  class="fa fa-fw fa-close extra">

和CSS之类的

.fa-close.extra:hover {color :red;}

Answer 2

仅将内部CSS应用于该范围：<span class="fa fa-fw fa-close" style=color:red>

Answer 3

如果只想将CSS应用于一个元素，则应使用id而不是class。

＃fa-close {color：red;}

Answer 4

在跨度中添加新类，然后使用该类编写css

HTML

<span  class="fa fa-fw fa-close apply_only_one">

CSS

.apply_only_one.fa-close{color :red;}

这是解决您问题的最佳方法。