javascript - CSS - 在同一个 html 标签中使用类来设计 div

Question

我有一个下拉菜单，当您点击父项时，它会显示出来。

HTML

<div class="dropdown"></div>

为此，我使用 jQuery 向 html 添加一个类 ( .active)。

JS/jQuery

if ($(e).children('.dropdown').hasClass('active')) {
  $(e).children('.dropdown').removeClass('active');
  return;
}
$('.dropdown').removeClass('active');
$(e).children('.dropdown').addClass('active');
return;

在写这篇文章时，我遇到了一个可能发生的问题。

CSS 代码如下所示:

.dropdown{
  /*dropdown styles*/
}

.active{
  /*active styles*/
}

如果我使用 .active 就留下了可能性对于另一个标签，这两种样式可能会发生冲突。

我很快就知道了

.dropdown .active{
  /*active styles*/
}

不像.active那样工作不是 .dropdown 的 child

因此我找到的解决方案之一是:

.parent .active{
  /*active styles*/
}

但是，如果说.parent类有另一个子项，它在单击时更改样式(需要设置样式)，应用 .active它会给下拉菜单 .active样式。如果这有点令人困惑，请看这个例子:

.parent{
  /*parent styles*/
}
.dropdown{
  /*dropdown styles*/
}
.active{
  /*DROPDOWN active styles*/
}
.click-me-button{
  /*default button to be clicked so as to be restyled*/
}

(希望这是有道理的)

我找到了两个解决方案:

1) 为每个命名 .active一些独特的东西，比如 .dropdown-active和 .click-me-button-active ;但是，我反对使用它，因为它需要更多的输入(如果你愿意，可以叫我懒惰)

2) 使用 .dropdown[class="dropdown active"] ;但是，如果 <div> 会中断看起来像这样:

<div class="dropdown blue active">

或

<div class="dropdown active blue">

为了克服这两个问题，我发现了以下内容:

`.dropdown[class*="active"]` or `.dropdown[class~="active"]`

它们看起来都一样。

我想弄清楚这个问题的是:什么是正确的方法来做到这一点，什么是最好的性能明智的选择，任何以上强>

Answer 1

我想你想做这样的事情:

.dropdown.active {
  text-decoration:underline;
}

请注意 .dropdown 和 .active 之间缺少空格。