在子元素和父元素上设置具有多种样式的子元素

Question

我希望在一个具有多个类的 div 中设置一个元素的样式，并且该元素也有多个类：

<div class="breadcrumbsHolder dark-mode" id="breadcrumbHolderID">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">Other</li>
    <li class="breadcrumb-item active" id="activeBreadcrumb">Active</li>
  </ol>
</div>

这似乎不适用于“活动”文本：

.breadcrumbsHolder.dark-mode {
  color: orange;
}
.breadcrumbsHolder.dark-mode > .breadcrumb-item.active {
  color: white;
}

这也不行：

.breadcrumbsHolder.dark-mode {
  color: orange;
}
.breadcrumbsHolder.dark-mode > #activeBreadcrumb {
  color: white;
}

也不：

.breadcrumbsHolder.dark-mode {
  color: orange;
}
#breadcrumbHolderID > #activeBreadcrumb {
  color: white;
}

我做错了什么？

需要注意的一点是 .breadcrumbsHolder.dark-mode 有效并适用于外部父 div

Answer 1

您不能使用尖括号>，因为这只会选择元素的直接子元素，这里不是这种情况 - ol 元素将是直接子元素。

以下是一些您可以使用的紧凑型选择器：

#activeBreadcrumb
li.active
.breadcrumb-item.active

如果要根据外部元素选择活动项：

.breadcrumbsHolder.dark-mode .breadcrumb-item.active

其他方式，供记录：

.breadcrumbsHolder .active
.breadcrumbsHolder li.active
.breadcrumb .active
ol li.active
.breadcrumbsHolder > .breadcrumb > .active

另见：How is the "greater than" or ">" character used in CSS?