jquery addClass 子选择器失败

Question

>我使用这个 CSS

fa-info {
  background-color: green;
  font-size: 30px;
}
fa-info .active {
  background-color: black;
  font-size: 25px;
}

使用此标记

 <fa-info>test</fa-info>

和这个jquery代码

$(document).ready(function(){
    $('fa-info').bind('mouseover', function(){
       $(this).addClass('active');
    });
    $('fa-info').bind('mouseout', function(){
        $(this).removeClass('active');
    });
});

不工作

如果我将 CSS 代码更改为

fa-info {
  background-color: green;
  font-size: 30px;
}
.active {
  background-color: black;
  font-size: 25px;
}

这为什么有效？

谢谢

Answer 1

当您指定如下选择器时：

fa-info .active

您要求fa-info的孩子拥有.active类。 这不是你现在的情况。

要在fa-info对象本身上具有活动类，您的 CSS 规则需要如下所示：

fa-info.active {
  background-color: black;
  font-size: 25px;
}

fa-info和.active之间没有空间。 这表明您希望它们位于同一对象上。

总结一下：

/* CSS rule that targets a child of fa-info with the active class */
fa-info .active {
  background-color: black;
  font-size: 25px;
}
/* CSS rule that targets a fa-info with the active class on the same object */
fa-info.active {
  background-color: black;
  font-size: 25px;
}

Answer 2

如果应该是

fa-info.active

没有空间。这是"给我一个带有类active的fa-info标签"

fa-info .active ，带有空格，表示"给我任何带有 fa-info 标签内active类的东西"

Answer 3

使用选择器：

fa-info .active

您正在使用类搜索fa-info元素的后代.active

如果要指向具有两个属性的元素，请删除它们之间的空格，例如：

fa-info.active

演示：http://jsfiddle.net/8U3rG/

参考： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

例如，选择器.key选择具有 类名键。选择器 p.key 仅选择<p>元素： 具有类名键。