Question

我有一个下拉列表，当您点击父母时，它会显示。

HTML

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

为此，我使用jQuery将类（.active）添加到html。

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

的孩子

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

.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"]`

他们似乎都是一样的。

我想弄清楚这个问题是：正确的方法是什么，以及 ANY 以上的最佳表现选择

Answer 1

我认为你正在做类似的事情：

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

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

CSS - 使用相同html标记中的类来设置div

1 个答案: